【前端面试题】防抖与节流-js

防抖

防抖策略是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

防抖应用：
用户在连续快速的触发事件时，可以通过防抖策略，只会执行最后一次才执行，这样可以有效减少执行次数；

输入框的防抖小案例

 var timer = null                    // 1. 防抖动的 timer

 function debounceSearch(keywords) { // 2. 定义防抖的函数
    timer = setTimeout(function() {
    // 发起 数据 请求
    getSuggestList(keywords)
    }, 500)
 }
//  $('#ipt')  用jquery获取的input框
 $('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer
    clearTimeout(timer)
    // ...省略其他代码
    debounceSearch(keywords)
 })

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。

节流

节流策略是当事件被触发后，一段时间内不能重复触发，可以减少一段时间内事件的触发频率。

节流应用

1. 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
2. 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率；

节流案例

  var timer = null // 1.预定义一个 timer 节流阀
  $(document).on('click', function(e) {
    if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
    timer = setTimeout(function() {
         // ...一些需要执行的代码
	timer = null // 2.清空 timer 节流阀，方便下次开启延时器
    }, 16)
  })

总结

防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效，前面 N 多次的触发都会被忽略。

节流：如果事件被频繁触发，节流能够减少事件触发的频率，只在单位时间内只触发一次！