节流的理解与实际应用

最新推荐文章于 2024-02-29 16:05:38 发布

C_guoqing

最新推荐文章于 2024-02-29 16:05:38 发布

阅读量763

点赞数

分类专栏： react vue

本文链接：https://blog.csdn.net/C_guoqing/article/details/125223014

版权

JavaScript 节流函数执行性能优化事件处理

关键词由CSDN通过智能技术生成

react 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

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>