防抖和节流

节流 防抖
  1. 概念
  2. 函数节流
  3. 函数防抖
  4. 参考文章

防抖和节流都是优化高频率执行js代码的一种手段。
在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。

概念

  • 函数节流：确保函数在一定时间内至多执行一次。（比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。）
  • 函数防抖：确保函数在特定时间内不再被调用后执行（注册时当用户输入邮箱的时候可以进行延迟验证）

    函数节流

    简单点讲就是函数是在特定时间内最多执行一次，如果在特定时间内再次调用函数那么就会被禁止掉，直接return出来，不会去执行函数里面的主要代码，所以一般我们会在函数里面加上一个标志区分上一次时候执行完毕（函数在上一次执行结束后才能再次执行）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var flag=true
    function text(){
      if(!flag){
        return ;
      }
      var flag=false;
      setTimeout(function(){
        flag=true;
      },300)
    }

可以看到函数节流主要是通过定义一个标志的变量

函数防抖

简单点讲就是第二次执行函数会把第一次函数的执行结束掉

1
2
3
4
5
6
7
function test(){
  var time=null;
  clearTimeout(time);
  time=setTimeout(function(){
    console.log("防抖函数");
  },300)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * 函数防抖的实现
 * @param  {Function} func   要实现函数节流的原函数
 * @param  {Number}   delay  结束的延迟时间
 * @return {Function}        添加节流功能的函数
 */

function debounce (func, delay) {
  let debounceIdentify = 0
  return (...args) => {
    debounceIdentify && clearTimeout(debounceIdentify)
    debounceIdentify = setTimeout(() => {
      debounceIdentify = 0
      func.apply(this, args)
    }, delay)
  }
}

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。
比如，我们一般提交表单在收到数据之前会使用一个loading来表示数据正在加载，但是当数据不是很大的时候loading就会一闪而过，那么我们就可以通过设置一个延迟函数来解决这个问题，在接受到数据后就要清除这个定时器

1
2
3
4
5
let identify=setTimeout(showBackModle,500);
fetch(url).then(res=>{
  //do something
  clearTimeout(identify)
})

参考文章