参考文献:

防抖函数和节流函数

防抖函数

概念:

触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间。

使用场景:

就像是我的搜索栏功能,是在里面内容变化后就实时触发搜索事件,但是有时候我们输的内容很长,在没有输完的时候就触发了事件,这样对性能来说是不好的,造成了很多无用的请求,这时候就需要用到防抖函数,来让其在搜索内容变化后的 200 毫秒内如果没有再更改才发起请求。

实现防抖函数的思路:

在高频触发事件的时候,取消原来的延时事件。

具体实现:

export function debounce(func, delay) {
  let timer = null
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

具体使用:

function sayHi() {
  console.log('防抖成功');
}

var select = document.getElementById('myselect');
select.addEventListener('change', debounce(sayHi)); // 防抖

节流函数

概念:

高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率;

使用场景:

就像我接了一个任务,只能在 5 秒完成任务给回复,在执行后的这 5 秒内,你再怎么给我布置任务我都不管直接当没听到,直到到 5 秒后执行完这个任务,你才可以再次给我布置任务,以此类推。。。

实现思路:

每次触发事件时都判断当前是否有等待执行的延时函数,如果有直接截断事件不用往下执行了

具体实现:

function throttle(fn, interval) {
  let canUse = true;
  return function(...args) {
    if (!canUse) return false;
    canUse = false;
    setTimeout((...args) => {
      fn.apply(this, args);
      canUse = true;
    }, interval || 500);
  }
}

具体使用:

function sayHi(e) {
  console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));