什么是防抖、节流?怎么实现它们?

类似于输入框联想、监听滚动这种会频繁触发的事件,我们实际上是不需要它们每次都触发的,如果每次都触发会给浏览器造成沉重的负担,防抖和节流就是用来限制这些事件的触发频率的。

防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

例子:如果有人进电梯,那电梯将在10秒钟后出发,这时如果又有人进电梯了,我们又得等10秒再出发。

思路:通过闭包维护一个变量,此变量代表是否已经开始计时,如果已经开始计时则清空之前的计时器,重新开始计时。

function debounce(fn, wait) {
    // 使用闭包保存持久变量
    var timeout = null;
    return function() {
        if(timeout !== null) 
                // 如果持续触发,就把前面的定时器取消掉,这样来保证只有不触发事件时才开始计时
                clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}
// 处理函数
function handle() {
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

节流:规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。

例子:游戏内的技能冷却,无论你按多少次,技能只能在冷却好了之后才能再次触发

思路:通过闭包维护一个变量,此变量代表是否允许执行函数,如果允许则执行函数并且把该变量修改为不允许,并使用定时器在规定时间后恢复该变量。

const throttle = function (func, delay) {
  var timer = null;
  return function () {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

function handle() {
  console.log(Math.random());
}

window.addEventListener('scroll', throttle(handle, 1000));

很多同学都知道防抖和节流,但是这两种技术的具体区别却不太清楚,简单来说就是:函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。

上一篇:Linux 常见Kernel优化


下一篇:2021-06-07