节流的理解与实际应用

最新推荐文章于 2024-05-11 18:28:59 发布

原创最新推荐文章于 2024-05-11 18:28:59 发布 · 890 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

react 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文深入探讨了JavaScript中的节流技术，通过举例和手写代码展示了如何实现节流函数，以确保在特定时间间隔内只执行一次指定操作，如限制输入框值变化时的函数触发频率。此外，还提供了实际应用场景，如输入框的keyup事件处理，以防止频繁调用函数。

1.理解

节流就是规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效，节流会稀释函数执行的次数，（大多数用户按钮的点击事件，在一定时间内无论点击多少次都只执行一次）
从游戏角度来说，节流就像是技能CD，如果这次使用了，在规定的时间内，你再点击它，他也不会释放技能

2. 手写节流函数

 function throttle(fn,delay){
      // 设置一个变量来控制 定时器中的函数的执行与否
      let canRun = true
      return function (){
         // 判断 变量的值，来决定是否返回
         if (!canRun) return 
          // 给变量重新赋值为false
          canRun = false
          setTimeout(() => {
            // 绑定this
              fn.call(this) 
              // 重新将变量设置为true
              canRun = true  
          }, delay);
     }
}

3. 实际应用

输入框内的值发生变化时，在规定的时间内只会执行一次fun函数，如果在规定的时间之内，输入框内的值有了新的变换，并不会触发函数的执行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节流</title>
</head>
<body>
    <h2>节流尝试</h2>
    <input type="text" id="input">
    
    <script>
        let inputValue = document.getElementById('input')
        inputValue.addEventListener('keyup', throttle(fun, 1000))

        function throttle(fn,delay){
           let canRun = true
           return function (){
              if (!canRun) return 
              canRun = false
              setTimeout(() => {
                fn.call(this) 
                canRun = true  
              }, delay);
           }
        }
        function fun(){
           console.log(this.value)
        }
        
    </script>
</body>
</html>