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

防抖与节流

防抖
节流
总结

防抖防抖策略是当事件被触发后，延迟 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) })

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。
节流节流策略是当事件被触发后，一段时间内不能重复触发，可以减少一段时间内事件的触发频率。

文章图片

节流应用

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

节流案例

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

总结防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效，前面 N 多次的触发都会被忽略。
【前端面试题|【前端面试题】防抖与节流-js】节流：如果事件被频繁触发，节流能够减少事件触发的频率，只在单位时间内只触发一次！