• 在做输入框查询的时候，如不加限制尤其是在输入中文，每输入一个拼音都会触发事件，造成计算机资源没必要的消耗。
• 使用防抖和节流可以很好的控制事件触发。

  函数防抖

• 理解为每次输入都会开启一个定时器，但每次输入都会关闭上一个定时器，直到再也不输入，执行存在的定时器。
• 创建一个闭包，使用timeout存储已创建的定时器，若有输入就关闭已创建的定时器，再创建一个新的定时器，使用bind处理 this问题，使用arguments传递参数。

  //防抖 function debounce(fn, interval = 600) { let timeout = null; return () => {//创建一个闭包 clearTimeout(timeout);//关闭上一个定时器 timeout = setTimeout((() => {//创建新的定时器 fn(arguments) }).bind(this), interval) } }

  使用方法

  let shuru = document.getElementById('shuru'); shuru.oninput = debounce((e) => { console.log(shuru.value) })

  函数节流

• 理解为第一次输入时创建一个指点时间的定时器，使用canRun管理状态，初始状态为true，将状态修改为false，不管后面再怎么输入都不会再创建定时器，直到达到定时器时间即执行，修改状态为true，可以创建新的定时器。

  //节流 function throttle(fn, interval = 600) { let canRun = true; return () => { if (!canRun) return; canRun = false; setTimeout((() => { canRun = true; fn(arguments) }).bind(this), interval) } }

  使用方法

  let shuru = document.getElementById('shuru'); shuru.oninput = throttle((e) => { console.log(shuru.value) })

总结

• 函数防抖，直到不再输入才执行。
• 函数节流，达到指定的时间就执行。
• 其实函数节流和函数防抖的实现很简单，主要是通过setTimeout和闭包来实现，应用的时候选择合适的方式即可。