function debouse(fn, delay = 2000) { let timer = 0; // 防抖函数 return function () { if (timer) clearInterval(timer) timer = setTimeout(() => { fn.apply(this.arguments) // 遗传this和参数 timer = 0 }, delay) } } const input1 = document.getElementById('input1') // input1.addEventListener('keyup', debouse(() => { // console.log('发起搜索:' + input1.value); // })) input1.addEventListener('keyup', () => { console.log('发起搜索:' + input1.value); })

时间: 2024-02-10 21:33:02 浏览: 109

这段代码是一个 JavaScript 实现的防抖函数，函数名为 `debouse`。它接受两个参数，第一个是需要执行的函数 `fn`，第二个是延迟时间 `delay`，默认为 2000 毫秒。当这个防抖函数被调用时，它会返回一个新的函数。每当新返回的函数被调用时，它会清除之前设置的定时器 `timer`，并重新设置一个新的定时器，延迟时间为 `delay`。如果在延迟时间内再次调用该函数，则会清除之前的定时器并再次设置新的定时器。当定时器到期时，会执行传入的函数 `fn`，并将传入的参数和 `this` 遗传给它。在这段代码中，我们将防抖函数应用在了一个搜索框的输入事件上。当用户在这个搜索框输入内容时，会触发输入事件，并打印出当前输入框中的值。使用防抖函数可以避免用户频繁输入时触发过多的事件，降低了服务器的压力。

function throttle(fn, delay) { let timer = null; return function () { if (!timer) { fn(); timer = setTimeout(function () { timer = null; // 清楚定时器 }, delay) } } }

这是一个经典的函数节流（throttle）实现，接收两个参数：一个是需要节流的函数 fn，另一个是节流时间间隔 delay。该函数的作用是在一定时间间隔内，只执行一次函数 fn，而忽略之后的所有调用。具体实现是通过闭包及 setTimeout 函数实现的。如果在 delay 时间间隔内多次调用该函数，只有第一次调用会执行 fn，之后的调用都会被忽略。这种技术常常被用于 DOM 事件的处理，以减少频繁触发事件而带来的性能问题。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>防抖</title> </head> <body> <input type="text" id="input" oninput="event" /> </body> <script> function debounce(fn, delay) { let timer; return function () { const context = this; const args = arguments; timer && clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; } const event = debounce(on, 2000); </script> </html>让input输入值发生变化时调用debounce 让它们关联起来

可以将input的oninput事件绑定到一个函数，该函数调用debounce函数并传入需要防抖的函数以及延迟时间。代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>防抖</title> </head> <body> <input type="text" id="input" oninput="handleInput()" /> </body> <script> function debounce(fn, delay) { let timer; return function () { const context = this; const args = arguments; timer && clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; } function handleInput() { // 需要防抖的函数 console.log('input value changed'); } const event = debounce(handleInput, 2000); // 调用debounce将需要防抖的函数传入并设定延迟时间 document.getElementById('input').oninput = event; // 将防抖后的函数和input的oninput事件关联起来 </script> </html> ```

阅读全文

function throttle(fn, delay) { let timer = null; return function () { if (!timer) { fn(); timer = setTimeout(function () { timer = null; // 清楚定时器 }, delay) } } }

相关推荐

Main_Timer0Delay_example.zip_DelayMS_PIC_TIMER0

Timer0_ISR.zip_Timer0isr函数

详解Python 多线程 Timer定时器/延迟执行、Event事件

seq_timer.rar_Linux/Unix编程_Unix_Linux_

Hardware-delay-timer-function.zip_定时器延时_延时

Timer0-Normal mode_timer0normalmode_avrtimer0_

delay_timer_一个verilog时钟发生器_

Remanent On-delayTimer for S7-300400.zip

timer

Timer

MFC Timer（SetTimer/KillTimer）使用方法

Linux中check_timer()及timer_irq_works()函数详解

防抖节流函数使用场景

精细金属掩模板(FMM)行业研究报告 显示技术核心部件FMM材料产业分析与市场应用

【创新未发表】斑马算法ZOA-Kmean-Transformer-LSTM负荷预测Matlab源码 9515期.zip

j link 修复问题套件

C#实现modbusRTU(实现了01 3 05 06 16等5个功能码)

【创新未发表】基于matlab粒子群算法PSO-PID控制器优化【含Matlab源码 9659期】.zip

最新推荐

详解Python 多线程 Timer定时器/延迟执行、Event事件

Vue中函数防抖节流的理解及应用实现

C#中Timer使用及解决重入问题

C#中的Timer和DispatcherTimer使用实例

C++定时器Timer在项目中的使用方法

Angular实现MarcHayek简历展示应用教程

管理建模和仿真的文件

深入剖析：内存溢出背后的原因、预防及应急策略（专家版）

Java中如何对年月日时分秒的日期字符串作如下处理：如何日期分钟介于两个相连的半点之间，就将分钟数调整为前半点

Crossbow Spot最新更新 - 获取Chrome扩展新闻

精细金属掩模板(FMM)行业研究报告显示技术核心部件FMM材料产业分析与市场应用