ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

防抖节流

2021-01-14 02:02:28  阅读:17  来源: 互联网

标签:function 防抖 节流 doSomething 300 onmousemove 事件


节流和防抖

防抖和节流的背景

为了解决频繁操作造成的频繁事件触发 相当于进行一个优化,当输入完成的时候再触发事件回调,而不是只要数据变化就一直触发事件回调。

防抖

防抖的原理

原理(对比下面示例):事件回调函数(doSomething)在一段时间(300毫秒)后才执行,如果在这段时间内再次调用则重新从0开始计算到300毫秒的时间,当预定的时间内没有再次调用该函数,则执行事件回调函数(doSomething)

理解:

// 示例1:
// _.debounce(事件回调函数, 间隔时间, [true立即调用/false]) 使用的是 underscore库
// 鼠标移动事件,只要鼠标一直动则会一直调用onmousemove函数,也就是_.debounce(doSomething, 300);那么debounce也就会一直重新计算时间,如果移动时间间隔超过300毫秒,那么就执行doSomething回调函数
container.onmousemove = _.debounce(doSomething, 300);
复制代码

手写防抖

function myDebounce(fn, interval = 500) {
  let timeout = null;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}
function doSomething(){
    // onm ousemove触发的事件回调函数
}
container.onmousemove = myDebounce(doSomething, 300);
复制代码

节流

节流原理

原理:单位时间内连续触发,但是只会执行一次,比如事件在300秒内不断触发点击事件,那么只会执行一次,到下一个300s开始计时的时候,就会在下一个300s内再执行一次;也就是说600s连续触发事件但是只会执行2次。(原理让我们知道需要一个标志位)

手写节流

function myThrottle(fn, interval = 500) {
  let run = true;
  return function () {
    if (!run) return;
    run = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      run = true;
    }, interval);
  };
}

function doSomething(){
    // onm ousemove触发的事件回调函数
}
container.onmousemove = myThrottle(doSomething, 300);

标签:function,防抖,节流,doSomething,300,onmousemove,事件
来源: https://www.cnblogs.com/yzy521/p/14275256.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有