理解了一下防抖函数的实现过程故做一下总结,供参考用:
- 要实现的成果是在页面的input中不停的输出内容,进行输出1秒钟后在控制台输入输出后果(进行相干的数据操作...)
- 要实现该成果须要用到定时器来触发相应的解决逻辑
-->然而在做的时候发现应用了setTimeout后仍旧是输出一次就解决(输入)一次,只是有些提早而已,这样就没有意义了
-->思路:须要将setTimeout存起来,而后每次input触发的时候就革除上一次存下的setTimeout,这样在最初一次触发的时候就只触发了一个setTimeout就实现了防抖的成果
-->实现办法:将setTimeout通过闭包的模式给存储起来,每次Input触发事件的时候应用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="int"> <script> //利用闭包实现防抖函数 //获取元素 冀望后果--->键盘始终进行输出,进行输出1秒后在控制台输入一次内容 let int = document.querySelector('#int') function debounce(delay, callback){ let timer return function(value){ //返回一个闭包函数,保留setTimeout, clearTimeout(timer) timer = setTimeout(() => { callback(value); //防抖函数只用来进行防抖操作,具体的逻辑应用callback触发 },delay) } } //防抖被调用之后的回调函数,用于做数据的解决,放弃防抖的简洁性 function fn(value){ console.log(value) //数据处理逻辑 } let debounceFun = debounce(1000,fn) //debounceFun 获取到闭包函数进行应用 int.addEventListener('keyup',function(e){ debounceFun(e.target.value) //将获取到的数据通过参数传给闭包进行解决 }) </script></body></html>
理了一下实现的程序: