JavaScript 一起了解防抖和节流 javascript

概念函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。
防抖
概念 : 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

$('#debounce').on('click', debounce()); function debounce() { let timer; return function () { clearTimeout(timer); timer = setTimeout(() => { // 需要防抖的操作... console.log("防抖成功！"); }, 500); } }

文章图片

函数防抖的应用场景，最常见的就是页面滚动条监听的例子，来进行解析：

let timer; window.onscroll = function () { clearTimeout(timer); timer = setTimeout(function () { //滚动条位置 let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop); }, 200) }

防抖函数的封装使用

/** * 防抖函数 * @param fn 事件触发的操作 * @param delay 多少毫秒内连续触发事件，不会执行 * @returns {Function} */ function debounce(fn,delay) { let timer = null; return function () { let self = this, args = arguments; timer && clearTimeout(timer); timer = setTimeout(function () { fn.apply(self,args); },delay); } }window.onscroll = debounce(function () { let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop); },200)

节流
概念: 指定时间间隔内只会执行一次任务（一定时间内js方法只跑一次）

$('#throttle').on('click', throttle()); function throttle(fn) { let flag = true; return function () { if (!flag) { return; } flag = false; setTimeout(() => { console.log("节流成功！"); flag = true; }, 1000); }; }

图片描述:

文章图片

函数节流应用的实际场景，根据文本框中输入的内容自动请求后台数据
【JavaScript 一起了解防抖和节流】下面是节流函数的封装与使用：

$('#input').on('keyup', throttle(function () { console.log($(this).val()); // ajax后台请求.... }, 1000)); /** * 节流函数 * @param fn 事件触发的操作 * @param delay 间隔多少毫秒需要触发一次事件 */ function throttle(fn, delay) { let flag = true; return function () { let self = this, args = arguments; if (!flag) { return; } flag = false; setTimeout(() => { fn.apply(self, args); flag = true; }, delay); } }