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: 让事件的回调一定时间间隔只执行一次。节流函数有两种实现方式,一种是记录增量,一种是定时方式。

  • 相关阅读:
    tcp/ip协议listen函数中backlog參数的含义
    oracle exp实例
    js21---单体(单例)模式
    js20---接口3种方式
    js19--继承终极版本
    js18--继承方式
    js17---创建对象:构造函数式和原型组合模式、动态原型模式、稳妥构造函数式
    js16--自定义原型对象
    js---15,模拟数组的ecah方法
    js14--原型2
  • 原文地址:https://www.cnblogs.com/xiao-yaolx/p/11329551.html
Copyright © 2011-2022 走看看