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

最近实现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);
}
}