防抖

需求

防抖的原理就是:你尽管触发事件,但是我一定在事件停止触发 n 秒后才执行。

这意味着如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件触发的时间为准,在此时间 n 秒后才执行。

总之,就是要等你触发完事件 n 秒内不再触发事件,我才执行,真是任性呐!

防抖 在 CodePen 中打开

var count = 1;
var container = document.getElementById('container');

function getUserAction() {
    container.innerHTML = count++;
};


function debounce(func, wait, immediate){
  var timeout;
  return function (){
    let self = this;
    let args = arguments
    clearTimeout(timeout);
    timeout = setTimeout(function(){
      func.apply(self, args)
    }, wait)
  }
};


container.onmousemove = debounce(getUserAction, 300, true);

参考

https://github.com/mqyqingfeng/Blog/issues/22
https://github.com/component/debounce/blob/f4afbd34e3e15be33d2f261b3ec67ecddaf4a4f6/index.js

results matching ""

    No results matching ""