关于javascript:防抖函数使用闭包

32次阅读

共计 1105 个字符，预计需要花费 3 分钟才能阅读完成。

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

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

理了一下实现的程序：

正文完