一、防抖(debounce)
1、防抖概念
防抖就是在规定时间内多次触发一个事件,只会执行一次,防止性能浪费和多次触发引起的后端数据异常。
2、应用场景
登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖; 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖; 文本编辑器实时保存,当无任何更改操作一秒后进行保存;
当我们在百度搜索时,下方会自动给出相关提示。如果每次用户输入变化都立即查询,那么会造成性能浪费,比如用户想搜索nihao,当用户在输入n的时候,就会触发查询,然后每次改变都会查询一次,给用户的体验也并不好。这个地方就可以使用防抖,当距离用户输入的时间间隔超过某一个时间时,才开始搜索,这个时间大概100ms应该就可以。
3、如何防抖
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn, delay) {
// 维护一个 timer,用来记录当前执行函数状态
let timer = null;
return function() {
// 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
let context = this;
let args = arguments;
// 清理掉正在执行的函数,并