zoukankan      html  css  js  c++  java
  • 防抖、节流、闭包的真谛所在

    哈哈,我也是一个标题党,今天想总结一下,今天学到的东西,便于今后复习拿出来看。

    首先呢,防抖是什么?

    防抖: 持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

    定义比较难懂,举一个比较贴切的例子就是 ,坐电梯。  每次电梯开门时就会停留10s钟等待乘客,当10s中结束后,电梯会自动关门,但如果这时又有乘客进入,则电梯又会等待10s。没错,这就是防抖的定义。

    再来介绍一个防抖的应用场景:

        例如:使用百度搜索学习资源时,当向输入框输入 搜索词 后,才会在搜索框推荐与你搜索词相关的字词。而不是你每输入一个字就推荐一下。

    函数防抖就是解决实时搜索(kepup)、拖拽(mousemove)等问题的。

    可见,每次触发事件都会执行回调函数,现在加入防抖处理:

    var debounce = function(func, delay) {
      var timer = null
      return function() {
          var that = this;
          var args = arguments;
          
          if(timer) {
              clearTimeout(timer);
          }
    
          timer = setTimeout(function() {
              func.apply(that, args);
          }, delay)
      }
    }
    
    ipt.addEventListener('keyup', debounce(function(e){
      console.log(e.target.value);
    }, 400))
    

      效果如下:

    可见,输入框在停止输入400ms后执行回调。在防抖后的回调函数用 timer 记录计时,每次执行回调的时候会先清空之前的计时。注意这里的timer是闭包变量,始终保持着上一个计时。

    这就是所谓的防抖。

    函数节流

    节流throttle: 让事件的回调一定时间间隔只执行一次。节流函数有两种实现方式,一种是记录增量,一种是定时方式。

  • 相关阅读:
    MySQL数据库 : 高级查询
    ElasticSearch : High Rest Api 使用
    Java : JavaWeb和Tomcat相关
    Linux : Ubuntu 安装 RabbitMQ
    Spring : Spring Security
    Java : logback简单配置
    Spring : JPA的单独使用
    Java : Netty 入门案例
    python__PIP : 安装第三方库
    好文章收藏(持续更新)
  • 原文地址:https://www.cnblogs.com/xiao-yaolx/p/11329551.html
Copyright © 2011-2022 走看看