js 手写防抖
使用场景:
多次操作只执行第一次操作。
可以用于用户点击按钮事件防抖操作。
多次操作只执行最后一次操作。
可以搜索输入框,输入多个字符进行搜索,当输入停止之后进行搜索操作者。
方法如下:
/**
* 防抖
* @param {function} fn 执行函数
* @param {number} wait 等待时间,毫秒
* @param {boolean} immediate 是否立即执行
*/
debounce: function (fn, wait, immediate) {
let timeout; // 局部全局变量
return function (...args) {
let context = this;
if (timeout) clearTimeout(timeout); // 清除计时器,但是timeout本身还在,只是不会在执行
if (immediate) { // 总是执行第一次操作
let callNow = !timeout; // 第一次为true
// 多次操作,timeout初始化,多次触发只有当wait等待时间结束timeout才为空
timeout = setTimeout(function () {
timeout = null;
}, wait);
// 第一次为true, 执行
if (callNow) fn.apply(context, args);
} else { // 总是执行最后一次操作
timeout = setTimeout(function () {
fn.apply(context, args);
}, wait);
}
};
},
使用
/**
* 多次点击事件,只执行第一次点击事件
*/
const entryClick = debounce(
function () {
console.log("多次点击事件,只执行第一次点击事件");
}, 500, true)
/**
* 输入多个字符,字符变化事件,只执行最后一次搜索
*/
const entryClick = debounce(
function () {
console.log("多次点击事件,只执行第一次点击事件");
}, 500)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库