防抖

防抖:防止连续多次触发,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)