商业门户网站制作,app设计方案,中国企业信息,wordpress后台登陆太慢防抖说明
#xff08;1#xff09;防抖的目的#xff1a;
当多次执行某一个动作的时候#xff0c;限制函数调用的次数#xff0c;节约资源。 #xff08;2#xff09;防抖的概念#xff1a;
函数防抖#xff08;debounce#xff09;#xff1a;就是指触发事件后1防抖的目的
当多次执行某一个动作的时候限制函数调用的次数节约资源。 2防抖的概念
函数防抖debounce就是指触发事件后在 n 秒内函数只能执行一次如果触发事件后在 n 秒内又触发了事件则会重新计算函数延执行时间。 3防抖的应用场景
连续的事件只需触发一次回调的场景
窗口大小Resize。只需窗口调整完成后计算窗口大小。防止重复渲染scroll鼠标的mousemove mousehover事件 重复的ajax调用会造成网络拥塞增加服务器压力登录、发短信等按钮避免用户点击太快以致于发送了多次请求对信息进行验证
被频繁触发短时间内多次触发不做限制的话有可能一秒之内执行几十次、几百次。
如果在这些函数内部执行了其他函数尤其是执行了操作 DOM 的函数浏览器操作 DOM 是很耗费性能的那不仅会浪费计算机资源还会降低程序运行速度甚至造成浏览器卡死、崩溃。这种问题显然是致命的。 防抖实现力扣题目2627. 函数防抖 - 力扣LeetCode 题目
请你编写一个函数接收参数为另一个函数和一个以毫秒为单位的时间 t 并返回该函数的 函数防抖 后的结果。
函数防抖 方法是一个函数它的执行被延迟了 t 毫秒如果在这个时间窗口内再次调用它它的执行将被取消。你编写的防抖函数也应该接收传递的参数。
例如假设 t 50ms 函数分别在 30ms 、 60ms 和 100ms 时调用。前两个函数调用将被取消第三个函数调用将在 150ms 执行。如果改为 t 35ms 则第一个调用将被取消第二个调用将在 95ms 执行第三个调用将在 135ms 执行。 上图展示了了防抖函数是如何转换事件的。其中每个矩形表示 100ms反弹时间为 400ms。每种颜色代表一组不同的输入。 案例 输入
t 50
calls [{t: 50, inputs: [1]},{t: 75, inputs: [2]}
]
输出[{t: 125, inputs: [2]}]
解释
let start Date.now();
function log(...inputs) { console.log([Date.now() - start, inputs ])
}
const dlog debounce(log, 50);
setTimeout(() dlog(1), 50);
setTimeout(() dlog(2), 75);第一次调用被第二次调用取消因为第二次调用发生在 100ms 之前
第二次调用延迟 50ms在 125ms 执行。输入为 (2)。代码实现 var debounce function(fn, t) {// 要执行的函数fn延迟的时间tvar time null;return function(...args) {if(time){// 清除定时器clearTimeout(time);}time setTimeout((){fn(...args);},t)}
}; 代码说明
函数防抖需要一个 setTimeout 来辅助实现setTimeout 延迟运行需要执行的代码。多次触发使用 clearTimeout 取消了先前通过调用 setTimeout 建立的定时器即清除之前的延迟记录。重新计时。若计时期间事件没有被重新触发等延迟时间计时完毕则执行目标代码。 防抖的 “立即执行版” 和 “非立即执行版” 函数防抖其实是分为 “立即执行版” 和 “立即执行版” 的。
立即执行版就是 触发事件后函数不会立即执行而是在 n 秒后执行如果在 n 秒内又触发了事件则会重新计算函数执行时间。 “非立即执行版” 指的是 触发事件后函数会立即执行然后 n 秒内不触发事件才能继续执行函数的效果。
// 立即执行版函数
function debounce(fn,t){let timer null;let flag true;return function(){clearTimeout(timer);if(flag){fn(...arguments);flag false;}timer setTimeout(() { flag true },t)}
}
// 非立即执行版函数
var debounce function(fn, t) {// 要执行的函数fn延迟的时间tvar time null;return function(...args) {if(time){// 清除定时器clearTimeout(time);}time setTimeout((){fn(...args);},t)}
};
