js防抖与节流

函数防抖
函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

函数节流
函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

主要用于频繁操作dom产生的事件,如:滚动事件,拖拽事件,窗口缩放等等
防抖:

function debounce(fn, delay) {
  let timer = null;
  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 清理掉正在执行的函数,并重新执行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

function scroll() {
  console.log(1111)
}
document.body.addEventListener('scroll', debounce(scroll, 1000));

节流

//以时间戳的形式或者定时器,都可以
var throttle = function(func, delay) {
            var prev = Date.now();
            return function() {
                var context = this;
                var args = arguments;
                var now = Date.now();
                if (now - prev >= delay) {
                    func.apply(context, args);
                    prev = Date.now();
                }
            }
        }
        function scroll() {
            console.log(111);
        }
        window.addEventListener('scroll', throttle(scroll, 1000));

你可能感兴趣的:(js防抖与节流)