防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 每次触发事件时都取消之前的延时调用方法 ​

常见使用场景是：用户输入，只有在输入完之后才做校验 ​

示例： 滚动结束后才执行一次

function debounce(fun, wait, imediate){
	let timer = null
  return function(...rest){
    if(imediate&&!timer) {
    	fun.apply(this,rest)
    }
  	if(timer)clearTimeout(timer)
    timer = setTimeout(()=>{
      fun.apply(this,rest)
    }, wait)
  }
}
const fun = function(...rest){
  console.log(new Date().getTime())
}
window.addEventListener('scroll',debounce(fun,1000,false))

过程：

• 设置一个外层函数，接受需要执行的函数、等待时间、是否立刻执行参数，定义一个变量timer共内层函数使用
• 外层函数return 一个函数，该函数中通过外层变量timer记录定时器，在设置定时器之前先判断是否是立刻执行并且没有定时器存在，满足则直接调用需要执行的函数；再判断定时器是否存在，如果存在清除定时器，设置定时器，定时器的回调为需要执行的函数，时间参数为等待的时间参数

​

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 每次触发事件时都判断当前是否有等待执行的延时函数 ​

常见使用场景是页面滚动，或者鼠标移动，减少函数调用的频次。 ​

示例： 滚动开始后每间隔1000ms执行一次

// 时间戳版本 

function throttle(fun, time){
	let last = 0;
  return function(...rest){
  	let now = new Date().getTime();
    if(now-last>time){
    	last = now;
      fun.apply(this, rest)
    }
  }
}
// 定时器版本
function throttle2(fun, time){
	let timer = null
  return function(...rest){
  	if(timer)return
    timer = setTimeout(()=>{
      fun.apply(this, rest)
      clearTimeout(timer)
      timer = null
    }, time)
  }
}

const callback = function(...rest){
	console.log((new Date().getTime()), rest)
}

window.addEventListener('scroll', throttle(callback, 1000))

过程： 两者均是利用外层函数提供一个变量共内层函数使用； 时间戳版本，通过时间来比较，如果间隔时间内执行过了才重新计时； 定时器版本，通过定时器，如果定时器执行过了才会重新设置定时器； ​

防抖和节流的主要区别：防抖是一段时间内触发了，就清除定时器重新计时，直到一段时间内没有触发了，才执行回调；而节流是一段时间内触发多次了，只会执行一次回调，并重新计时。