js实现 throttle 和 debounce,节流,防抖详解

2019-11-25 17:05:44

1、throttle 节流:drag改变浏览器大小,触发onresize函数,实现拖动每过1秒输出一次,不足1秒,1秒后输出一次。多用于高频操作,如抢票、抢购等,无论点击多少次,只固定间隔执行一次,以减轻压力。

原理: 设置canRun作为是否执行的标志。每次触发onresize,都判断canRun的值(true执行,false不执行)。第一次应该执行,所以设置canRun初始值为true。当第一次执行后,设置canRun为false(防止下次执行),并设置计时器,以恢复canRun的值。


var canRun = true;

window.onresize = function() {

  if (!canRun){

    return;

  }

  canRun = false;

  setTimeout(function() {

    console.log('节流了');

    canRun = true;

  }, 1000);

}

        好,原理有了,接下来我们封装一个随处可用的函数,"window"只是为了理解。可以删掉:


window.canRun = true;

window.throttle = function(callback, time) {

  if (!window.canRun) {

    return;

  }

  window.canRun = false;

  setTimeout(function() {

    callback();

    window.canRun = true;

  }, time);

}

// 这样使用:

window.onresize = function() {

  window.throttle(function() {

    console.log('防抖成功'); // 业务代码

  }, 1000);

    }

 


 


 


 

2、debounce防抖:drag改变浏览器大小,触发onresize函数,实现拖动停顿1秒输出。多用于输入框,当某一次输入后停顿满n秒才会去触发远程搜索。

        原理:timer作为定时器,每次触发onresize事件,都清一下定时器(之前未执行的drag方法就不会再执行),新的定时器在1秒后执行方法,那么如果下次drag在1秒内,这次赋值的定时器又会被清掉(搜索方法不会执行),直到下次drag相对于这次drag间隔时间大于1秒(定时器可能没那么准)再执行一次方法onresize。


var timer = false;

window.onresize = function() {

  console.log('1');

  clearTimeout(timer);

  timer = setTimeout(function() {

    console.log('防抖动');

  }, 1000);

    }

        同样,封装起来使用:


timer = false;

debounce = function(callback, time) {

  clearTimeout(timer);

  timer = setTimeout(callback, time);

}

onresize = function() {

  debounce(() => {console.log('不抖了');}, 1000);

    }

 



  • 2020-05-20 22:29:05

    javascript中为何在匿名function函数后面还外加

    它可以解释成为“匿名函数自调用”,也就是说,定义一个匿名函数,然后马上调用它(因为它是匿名的,如果不立即调用就获取不到该函数的引用了)。通常它被应用在一些大型的JS框架中(如上面所说的),因为这个匿名函数的函数体相当于提供一个匿名的名字空间,这样就不会再与用户自定义的JS函数、变量、对象发生冲突了。尽管JS没有显示地提供命名空间的定义和使用机制,但这种匿名方式却不失为是一种很好的解决命名空间问题的方法。

  • 2020-05-20 22:30:14

    js中利用prototype给类添加方法

    你可能会想,这不就是个简单的函数声明?没错,这个函数就是一个类的定义的实现。如何使用这个类呢?看下面的代码:var cls1 = new MyClass(); 这样,利用new就可以生成MyClass的一个实例了。所以在js中可以说函数就是类,类就是函数。

  • 2020-05-21 10:56:53

    fixed z-index失效

    作为一个假的前端,在调试一个页面时出现了如下bug。 左侧的菜单固定为fixed时,二级菜单无法设置有效的z-index,导致菜单隐藏在页面元素之下,明明页面元素的z-index是1,但是无论把菜单的z-index设置为多大,都不管用。