zoukankan      html  css  js  c++  java
  • 运用节流函数实现规定时间内触发或点击多次只触发一次,

    <!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. 用户点击提交按钮,假设我们知道接口大致的返回时间的情况下,我们使用节流,只允许一定时间内点击一次。

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

  • 相关阅读:
    一个比较日期大小的javascript函数
    导出Excel(利用xml标记)
    Oracle 数据库的备份与恢复
    总是浮在页面底部的广告DIV
    实用批处理文件 (IP设置.bat, 清理系统垃圾.bat, atc.)
    【转:来源不详】几家IT公司面试全揭秘
    二级联动(javascript Array)
    JS实现定时循环上翻
    ORACLE函数大全 [转]
    C#中Timer类与线程
  • 原文地址:https://www.cnblogs.com/agen-su/p/14463867.html
Copyright © 2011-2022 走看看