87,917
社区成员
发帖
与我相关
我的任务
分享关于函数防抖与节流的问题
第一个问题是关于防抖的,我在html里面添加了一个input标签
具体代码如下:
而后在script标签里注册了一个input事件
这个变量time 为什么声明成全局变量有值,而在局部变量中声明则没有值,我一开始的想法是,因为局部变量在函数执行完了之后time变量就会销毁,所以就没有办法将延时器的赋值给time,我另一种方式封装了防抖函数,具体代码如下:
而这一段代码在函数体内 声明let=time 则可以储存延时器
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" />
</body>
而后在script标签里注册了一个input事件
const input = document.querySelector("input")
let time
input.oninput = () => {
if (time) {
clearTimeout(time)
}
time = setTimeout(() => {
console.log(input.value)
}, 2000)
}这个变量time 为什么声明成全局变量有值,而在局部变量中声明则没有值,我一开始的想法是,因为局部变量在函数执行完了之后time变量就会销毁,所以就没有办法将延时器的赋值给time,我另一种方式封装了防抖函数,具体代码如下:
function debounce(fn, wait) {
let time
return function () {
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
fn()
}, wait)
}
}
function fn() {
console.log(input.value)
}
input.oninput = debounce(fn, 2000)
而这一段代码在函数体内 声明let=time 则可以储存延时器
...全文
请发表友善的回复…
发表回复
scscms太阳光 2020-04-14
- 打赏
- 举报
闭包知识，拿去不谢
