理解了一下防抖函数的实现过程故做一下总结,供参考用:

  • 要实现的成果是在页面的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>

理了一下实现的程序: