dw网页设计制作网站的成品,运城网站建设公司,wordpress 打开好慢,怎样制作网站教程哪家好手写防抖debounce
应用场景
当需要在事件频繁触发时#xff0c;只执行最后一次操作#xff0c;可以使用防抖函数来控制函数的执行频率,比如窗口resize事件和输入框input事件#xff1b;
这段代码定义了一个名为 debounce 的函数#xff0c;它接收两个参数#xff1a;fn…手写防抖debounce
应用场景
当需要在事件频繁触发时只执行最后一次操作可以使用防抖函数来控制函数的执行频率,比如窗口resize事件和输入框input事件
这段代码定义了一个名为 debounce 的函数它接收两个参数fn一个需要被防抖处理的函数和 delay一个延迟时间单位是毫秒。防抖(debounce)技术的主要目的是限制某个函数在一定时间内只执行一次即使在这段时间内被频繁调用。这对于优化性能特别有用比如避免因快速连续触发事件如窗口调整大小、输入验证等而造成的不必要的计算或 DOM 操作。 下面是代码的逐行解析 let timer null;在这个函数作用域内声明一个变量 timer并初始化为 null。这个变量将用来存储 setTimeout 的返回值即一个可以被清除的计时器标识。return function () { ... };debounce 函数返回一个新的匿名函数。这样做是因为我们希望返回一个经过防抖处理的新函数而不是直接修改原函数。这种设计模式称为“闭包”返回的函数能够访问外部函数debounce中的局部变量如 timer。if (timer) clearTimeout(timer);每次新的返回函数被调用时首先检查 timer 是否存在且不为 null。如果存在这意味着之前已经设置了一个定时器但尚未执行。此时通过 clearTimeout 清除这个定时器从而取消即将执行的 fn 调用。timer setTimeout(() { fn.apply(this, arguments); }, delay);这里设置一个新的定时器。当过了 delay 毫秒后内部的箭头函数会被执行它通过 apply 方法调用原始函数 fn并确保 this 的上下文以及传给防抖函数的所有参数都能正确传递给 fn。apply 的第一个参数 this 保证了在 fn 被调用时能保留正确的上下文环境特别是当 fn 是对象的方法时第二个参数 arguments 是一个类数组对象包含了所有传入的参数。
function debounce(fn, delay) {let timer null;return function () {
如果此时存在定时器的话则取消之前的定时器重新记时if (timer) clearTimeout(timer);// 设置定时器使事件间隔指定事件后执行timer setTimeout(() {fn.apply(this, arguments);}, delay);};}
应用
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput typetext idmyInputdiv iddisplay/div
/body
script// 假设这是你的去抖动函数 function debounce(fn, delay) {let timer null;return function () {if (timer) clearTimeout(timer);timer setTimeout(() {fn.apply(this, arguments);}, delay);};}// 这是你想要在输入框内容变化时执行的函数function updateContent(event) {// 获取输入框的值const inputValue event.target.value;// 更新某个元素的内容例如一个显示框displayElement.textContent inputValue;}// 获取输入框和显示框的元素const inputElement document.getElementById(myInput);const displayElement document.getElementById(display);// 为输入框绑定事件监听器并使用去抖动函数//将返回的函数绑定到相应的事件处理程序上以实现防抖的效果。inputElement.addEventListener(input, debounce(updateContent, 500)); // 延迟500毫秒
/script/html
展示 function debounce(fn,delay){
let timernull;
return function(){
if(timer) clearTimeout(timer);
timersetTimeout(()fn.apply(this,arguments),delay)
}}
