防抖

防抖：防止连续多次触发，n秒内连续触发则只触发最后一次。目的：只执行一次
原理：触发之前判断是否已经触发，已经触发就取消执行上一次的事件，然后执行本次事件。

// 防抖函数
function debounce(fn, delay = 200) {
  let timer = 0
  return function() {
    // 如果这个函数已经被触发了
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

节流

节流：防止连续多次触发，n秒内连续多次触发则n秒内执行一次。目的：减少执行次数

原理：触发之前判断是否已经触发，已经触发就取消当前本次执行事件，继续执行上一个事件。

// 节流函数
function throttle(fn, delay = 200) {
  let  timer = 0
  return function () {
    if(timer){
      return
    }
    timer = setTimeout(() =>{
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

防抖和节流的区别：

  • 现象上的区别：防抖是一直连续触发时无论执行多少次都执行最后一次。节流是连续一直触发时n秒执行一次，减少执行次数。
  • 原理上的区别：当连续触发时，防抖是取消执行上一次的事件, 节流是取消执行本次的事件。

防抖和节流的使用

let input = document.getElementById('input');
input.oninput = debounce(function(ev){
	console.log('input');
}, 1000)

window.document.onmousemove = throttle(function(){
	console.log('onmousemove');
}, 1000)