其他分享
首页 > 其他分享> > 运用节流函数实现规定时间内触发或点击多次只触发一次,

运用节流函数实现规定时间内触发或点击多次只触发一次,

作者:互联网

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>节流测试</title>
</head>
<body>

  <button id="throttle">点我</button>

  <script>
    window.onload = function() {
      // 1、获取按钮,绑定点击事件
      var myThrottle = document.getElementById("throttle");
      myThrottle.addEventListener("click", throttle(sayThrottle));
    }

    // 2、节流函数体
    function throttle(fn) {
      // 4、通过闭包保存一个标记
      let canRun = true;
      return function() {
        // 5、在函数开头判断标志是否为 true,不为 true 则中断函数
        if(!canRun) {
          return;
        }
        // 6、将 canRun 设置为 false,防止执行之前再被执行
        canRun = false;
        // 7、定时器
        setTimeout( () => {
          fn.call(this, arguments);
          // 8、执行完事件(比如调用完接口)之后,重新将这个标志设置为 true
          canRun = true;
        }, 2000);
      };
    }

    // 3、需要节流的事件
    function sayThrottle() {
      console.log("节流ok!");
    }

  </script>
</body>
</html>

  

那么,节流在工作中的应用?

  1. 懒加载要监听计算滚动条的位置,使用节流按一定时间的频率获取。
  2. 用户点击提交按钮,假设我们知道接口大致的返回时间的情况下,我们使用节流,只允许一定时间内点击一次。

这样,在某些特定的工作场景,我们就可以使用防抖与节流来减少不必要的损耗。

标签:function,触发,throttle,节流,canRun,点击,true
来源: https://www.cnblogs.com/agen-su/p/14463867.html