zoukankan      html  css  js  c++  java
  • Throttle Debounce 总结

    比较

    二者本质:都是限制频繁触发

    二者区别:

    • throttle: 节流阀,保证多少ms内只执行一次。
    • debounce: 去抖,保证多少ms内不再被触发时就会执行一次。

    类比电梯策略理解:

    throttle:第一个人进来后15s运送一次,不等待。
    debounde:第一个人进来15s后运送一次,假设15s内又有人进来,重新计时,一直到15s内不再有人进来则运送一次

    一秒理解 throttle debounce:http://demo.nimius.net/debounce_throttle/

    throttle debounce 实现

    export function throttle(delay, noTrailing, callback, debounceMode) {
      var timeoutID;
      // Keep track of the last time `callback` was executed.
      var lastExec = 0;
      if (typeof noTrailing !== 'boolean') {
        debounceMode = callback;
        callback = noTrailing;
        noTrailing = undefined;
      }
      function wrapper() {
        var self = this;
        var elapsed = Number(new Date()) - lastExec;
        var args = arguments;
        // Execute `callback` and update the `lastExec` timestamp.
        function exec() {
          lastExec = Number(new Date());
          callback.apply(self, args);
        }
        function clear() {
          timeoutID = undefined;
        }
        if (debounceMode && !timeoutID) {
          exec();
        }
        if (timeoutID) {
          clearTimeout(timeoutID);
        }
        if (debounceMode === undefined && elapsed > delay) {
          // throttle时,根据时间戳之差是否大于delay决定是否执行回调
          exec();
        } else if (noTrailing !== true) {
          // debounce时,setTimeout延迟执行回调
          timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
        }
      }
    
      return wrapper;
    }
    
    export function debounce(delay, atBegin, callback) {
      return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
    }
    
    

    应用

    shop.js: // 输入关键字查询门店

    import { throttle, debounce } from 'throttle-debounce';
    ...
    debounce(200, async(val) => { await this.getShopList(val); });
    ...
    

    还可以参考underscore, lodash 中throttle, debounce的实现,做了更多的兼容和考虑。

    throttle debounce 应用场景

    throttle:
    监听resize事件做一些DOM元素的定位更改;
    监听scroll 事件判断上拉时是否要加载数据
    debounce:
    搜索框输入发送ajax请求,监听onchange or keyup 事件进行查询;

    参考

  • 相关阅读:
    aws s3文件上传设置accesskey、secretkey、sessiontoken
    HTTP的Referrer和Referrer Policy设置
    小技巧-mac修改finder菜单栏
    使用katalon自带Spy功能获取/验证控件Selector、XPath
    java的8种基础类型
    Mac-搭建Hadoop集群
    新公司入职56天后的面谈小结
    Java对字符串加密并返回星号※
    为什么要写设计文档
    在Linux上部署Web项目
  • 原文地址:https://www.cnblogs.com/jone-chen/p/14794793.html
Copyright © 2011-2022 走看看