问答

underscore的防抖函数,难题

作者:admin 2021-04-18 我要评论

在界面中添加一个按钮。immediate设置为false,wait设置为1000.连点两下按钮,later函数会被调用。这是为啥呢?我设置的超时时间为1000,还没到时间呢,为啥late...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

在界面中添加一个按钮。immediate设置为false,wait设置为1000.连点两下按钮,later函数会被调用。这是为啥呢?我设置的超时时间为1000,还没到时间呢,为啥later会被触发执行呢?
underscore这个库的防抖函数实现如下。

  var timeout, previous, args, result, context;

  var later = function () {
    var passed = now() - previous;
    console.log('passed', passed)
    if (passed < wait) {
      console.log('later被调用,但是还有' + (wait - passed) + "时间,才能调用")
      timeout = setTimeout(later, wait - passed);
    } else {
      console.log('clear timeout and call our func')
      timeout = null;
      if (!immediate) result = func.apply(context, args);
      // This check is needed because `func` can recursively invoke `debounced`.
      if (!timeout) args = context = null;
    }
  };

  var debounced = restArguments(function (_args) {
    context = this;
    args = _args;
    previous = now();
    console.log('debounce timeout', timeout)
    if (!timeout) {
      console.log('------------')
      timeout = setTimeout(later, wait);
      if (immediate) result = func.apply(context, args);
    }
    return result;
  });
###

这样连点两次,test在不到1秒的时候,就会执行。为什么呢?

    onClick() {
      this.callback();
    },
    test() {
      console.log("test func", Date.now() - this.p);
      this.timeout = null;
    },
    callback() {
      this.p = Date.now();
      if (!this.timeout) {
        this.timeout = setTimeout(this.test, 1000);
      }
    },
###

你的问题一开始没看懂,你自己添加了一个回答,那个回答里面的代码时间计算是有问题的。
当你在一秒钟内点击两下,每一下都会更新你的this.p参数,意味着,当你在500ms点击第二下的时候this.p记录了最后一次的时间,所以时间计算当然不准

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器