vue3输入框的防抖

最新推荐文章于 2025-04-26 15:16:40 发布

javanojava1

最新推荐文章于 2025-04-26 15:16:40 发布

阅读量754

点赞数

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/javanojava1/article/details/129184728

版权

文章介绍了如何在JavaScript中实现防抖(debounce)函数，通过创建一个名为fangdou的函数，该函数用于包装其他函数，确保在特定时间间隔内只执行一次。这个功能常用于优化性能，例如在监听input事件时，防止频繁触发回调。示例中展示了如何将fangdou函数应用到Vue的watcher中，以控制console.log的输出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建js文件夹，复制以下代码

export const fangdou = function (fn, time) {
// 4.创建一个标记用来存放定时器的返回值
let timeout = null;
return function () {
let that = this
let args = arguments
// 5.每当用户触发input事件把前一个 setTimeout 清楚掉
if (time){
clearTimeout(timeout);
}

// 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内还有字符输入的话，就不会执行 setTimeout里面的内容
timeout = setTimeout(() => {
// 7.这里进行防抖的内容
fn.apply(that,args);
}, time);
};
}

2.引入文件

watch:{
inval:fangdou(function (){
console.log(this.inval)
},500)
},