浅聊函数防抖与节流
原创
防抖(debounce)
所谓防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
防抖类型分为
非立即执行版 立即执行版 合成版本 防抖
防抖应用场景
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位 文本编辑器实时保存，当无任何更改操作一秒后进行保存
非立即执行版
非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
/**
* @description:
* @param {*} func 触发的事件
* @param {*} wait 多少时长才执行事件
* @return {*}
*/
function debounce(func, wait) {
let timeout;
return function(){
// 获取当前作用域和参数
const context = this;
const args = [...arguments]
// 如果当前timeout 存在
// 清空定时器,再次等待wait时间过后再次执行事件
if(timeout) clearTimeout(timeout)
// 定时执行 传递进来的事件
timeout = setTimeout(()=>{
func.apply(context,args)
},wait)
}
}立即执行版本
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。
function debounce(func,wait) {
let timeout;
return function () {
const context = this;
const args = [...arguments];
if (timeout) clearTimeout(timeout);
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
}代码解析
当 执行
debounce函数时， 第一次进来时，timeout为false，所以callNow的值 为true,那么它会立即执行func函数，这时timeout的值 为true, 当timeout 值为true 时， 会执行 清空定时器，此时 timeout 又为 false 了, 这时callNow又 为true,再次执行func函数。一直循环这样的操作：
当
timeout为false时，会立刻执行func函数。当
timeout为true时，它会执行clearTimeOut，这时timeout又为false, 而callNow=! timeout, 就会立刻执行func函数了。
合成版本 防抖
通过传递
Boolean来决定执行哪种版本。
true为立即执行版false为非立即执行版本
debounce(func,1000,true)
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func, wait, immediate) {
let timeout;
return function () {
const context = this;
const args = [...arguments];
if (timeout) clearTimeout(timeout);
if (immediate) {
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
}节流
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。
节流有两种实现：
时间戳版本 定时器版本
节流应用场景
scroll事件，每隔一秒计算一次位置信息等 浏览器播放事件，每个一秒计算一次进度信息等input输入框在搜索内容时，可以控制多少s 在执行请求，避免多次发起请求，节约性能。
时间戳版本
function throttle(func, wait) {
var previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}定时器版本
function throttle(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}代码解析
当执行
throttle函数时，timeout默认为undefined, 此时，! timeout为true时，执行 定时器，并且 将timeout为 null，即为false, 再次执行throttle函数时，!timeout又为true，再次执行定时器。通过
timeout的状态来达到节流的控制
总结
防抖： 触发事件后，一定时间后再执行事件，可以
立即执行也可以一定时间再执行节流： 控制流量，在单位时间内只能请求一次，避免多次触发事件，影响服务器性能。
结语
❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章 关注公众号 前端自学社区，即可获取更多前端高质量文章！ 关注后回复关键词“加群”， 即可加入 “前端自学交流群”，共同学习进步。 关注后添加我微信拉你进技术交流群 欢迎关注公众号，更多精彩文章只在公众号推送
参考
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。