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-02-20 18:35:21

    Vue加载组件、动态加载组件的几种方式

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

  • 2020-02-22 13:58:50

    深入理解 requestAnimationFrame

    在Web应用中,实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现。除此之外,html5 还提供一个专门用于请求动画的API,那就是 requestAnimationFrame,顾名思义就是请求动画帧。 为了深入理解 requestAnimationFrame 背后的原理,我们首先需要了解一下与之相关的几个概念:

  • 2020-02-22 17:35:14

    使用tweenjs写一个发牌的demo

    移动端h5的三大抽奖方式:转盘,老虎机,翻纸牌。 前两样demo比较多,用户也审美疲劳了。这次微信公众号要抽奖,于是调研了下翻纸牌。

  • 2020-02-22 17:45:43

    tweenjs简单快速学习

    tweenjs 是使用 JavaScript 中的一个简单的补间动画库,支持数字、对象的属性和 CSS 样式属性的赋值。 tweenjs 以平滑的方式修改元素的属性值,需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration),之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。