const debouce = (fn, ms)=>{ let timer = null; return function() { if (timer) clearTimeout(timer); timer = setTimeout(fn.bind(this), ms); }; }; // 绑定input事件 document.querySelector("textarea").oninput = debouce(function() { console.log(this) console.log("替换一次"); let content = this.value; // 替换敏感字 content = content.replace(/sm/gi, "**"); // 重新设置 this.value = content; }, 500);
时间: 2024-02-14 20:28:46 浏览: 110
这段代码是一个用于实现输入框的防抖功能的函数。当用户输入内容时,会触发debouce函数中返回的函数。该返回的函数内部使用了setTimeout函数来延迟执行传入的回调函数fn。
在这个例子中,回调函数是一个匿名函数,它会在用户输入结束后的500毫秒内执行。在回调函数内部,首先清除之前设置的定时器(如果存在),然后再次设置新的定时器。这样就能保证只有用户输入结束后的500毫秒内没有新的输入操作,才会执行回调函数。
在回调函数中,通过this.value获取输入框的当前内容,并将其存储在content变量中。然后使用正则表达式将敏感字"sm"替换为"**",并将替换后的内容重新赋值给输入框,实现敏感字的替换效果。
总体来说,这段代码可以帮助我们在用户输入结束后再进行处理,避免频繁触发处理逻辑,提升性能和用户体验。
相关问题
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(onChang,2000) 和function debounce(fn, delay) { let timer; return function () { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; } const event = debounce(onChang,2000) 详细解释这两段代码的区别 以及timer && clearTimeout(timer);这句的作用
这两段代码的区别在于第一段代码在判断计时器是否存在时使用了逻辑与运算符 `&&`,而第二段代码直接调用了 `clearTimeout` 函数来清除计时器。
在第一段代码中,使用了逻辑与运算符 `&&` 来判断计时器变量 timer 是否存在。如果 timer 存在,那么就说明之前已经设置过计时器了,此时需要先清除之前设置的计时器,然后再设置一个新的计时器。如果 timer 不存在,那么直接设置一个新的计时器即可。
而在第二段代码中,直接调用了 `clearTimeout` 函数来清除计时器,无需先判断计时器是否存在。
两段代码的作用是相同的,都是实现函数防抖功能。
至于 `timer && clearTimeout(timer)` 这句代码的作用,它的意思是如果 timer 存在,就执行 `clearTimeout(timer)`。这里使用了短路求值的特性,如果 timer 不存在,那么 `clearTimeout(timer)` 不会被执行。如果 timer 存在,那么 `clearTimeout(timer)` 会被执行,从而清除之前设置的计时器。这样可以避免在没有设置计时器的情况下调用 `clearTimeout` 函数,从而避免出现错误。
<!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>
```
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)