函数的防抖和节流

javascript/jquery

浏览数:1,052

2019-7-20

目的:节约性能开销,避免多次频繁的触发业务逻辑造成页面卡顿。

应用场景:节流和防抖的核心其实就是限制某一个方法被频繁触发,
比如说DOM事件的监听回调,inputkeyupkeydownwindow.scroll,window.resize事件,按钮连续变态点击导致无限制发送接口请求等应用场景

防抖

一个需要频繁触发的函数,在规定的时间内,只执行最后一次,前面的触发不执行。(当持续触发事件的时候,函数是完全不执行的,等最后一次触发结束的一段时间之后,再去执行)

原理

第一次调用函数创建一个定时器,指定的时间间隔后运行代码。第二次调用函数时,它会清除前一次的定时器并设置另一个。

let debounce = function(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
};
let box = document.getElementById("app");
box.onmousemove = debounce(function(e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 100);

节流

一个函数执行一次后只有大于设定的执行周期才会执行第二次。(指连续触发事件但是在 n 秒中只执行一次函数)

原理

用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,这样循环下去

function throttle(func, delay) {
  let run = true;
  return function() {
    if (!run) {
      return;
    }

    run = false;
    setTimeout(() => {
      func.apply(this, arguments);
      run = true;
    }, delay);
  };
}

box.onmousemove = throttle(function(e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 500);

作者:millzhang