JavaScript防抖,避免keyup事件触发多次

代码 1年前 (2022) 站长
263 0 0

最近实现js搜索建议的时候用到keyup事件,keyup是当按键被松开时触发,而使用中文输入法时,会多次触发keyup。也是搜索了好久才有头绪,刚开始搜索的keyup为啥触发多次,了解到防抖,也是本人第一次了解防抖这个词,一下记录js防抖关键代码。

1.为什么需要防抖,防抖用什么作用?、

在前端开发当中,有些交互事件,会被频繁触发,这样会导致我们的页面渲染性能下降,如果频繁触发接口调用的话,会直接导致服务器性能的浪费。

举个例子,在下面的代码中,我们定义了一个输入框,输入一段文字,测试键盘的keyup(键盘弹起)事件触发了多少次,通过该实例来演示事件是如何被频繁触发的。

<input type="text" id="demo">
<div>触发了:<span id="count">0</span>次</div>
<script>
// 获取input输入框与span标签
let demo = document.getElementById("demo");
let count = document.getElementById("count");

// 为demo输入框注册keyup事件
let init = 0; // 记录keyup事件被触发的次数
demo.onkeyup = function () {
// 将span标签中的文本修改为事件被触发的次数
count.innerHTML = ++init;
}
</script>
JavaScript防抖,避免keyup事件触发多次

从上面的演示可以看到,我在输入框中输入了5个字,但是keyup事件会被触发30次。如果我们使用这样的方式去检测用户输入的用户名是否可用,这样高频率的触发不仅是对性能极大的浪费,而且用户还没有输入完就开始检测,对用户来说提示并不友好。在这样的情况下,我们就可以等用户输入完成之后,再去触发函数,这样的优化就使用到了防抖。

防抖最终实现代码:

//防抖函数
function debounce(fun, time) {
let timer;
return function () {
// 将当前的this赋值给that
let that = this;
// 取消当前的定时器效果
clearTimeout(timer);
// time时间后触发函数fun
timer = setTimeout(function () {
fun.call(that); // 使用call改变函数内部的this指向,
}, time);
}
}

//当键盘键被松开时发送Ajax获取数据
$('.wd').keyup(debounce(function () {

},1000))

版权声明:站长 发表于 2022年11月28日 pm2:09,最后更新时间2022-11-28 14:09:15。
转载请注明:JavaScript防抖,避免keyup事件触发多次 | 影视导航

相关文章

暂无评论

暂无评论...