首页 > web前端 > js教程 > 正文

**为什么简单的JavaScript节流函数会消除节流期后的最终执行?**

DDD
发布: 2024-10-27 00:41:30
原创
482 人浏览过

**Why does the Simple JavaScript Throttle Function Eliminate the Final Execution After the Throttle Period?**

JavaScript 中的简单节流

JavaScript 提供了各种用于节流功能的工具,包括 lodash 和 underscore。然而,对于这些库可能过多的情况,自定义节流实现是可取的。

现有节流功能和挑战

提供的节流功能是功能性的,但是它提出了一个问题。节流期结束后,它最后一次执行该函数。在该函数不应多次触发的情况下,这可能会导致出现不需要的行为。

改进的节流函数

要解决此问题,请考虑以下增强的节流函数:消除节流周期后的最终执行:

function throttle(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = Date.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout &amp;&amp; options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};
登录后复制

此更新的函数提供了一个可配置的节流机制,带有用于前沿和后沿触发的可选参数。

简化的节流功能

如果不需要可定制性,更简单的节流函数如下:

function throttle (callback, limit) {
    var waiting = false; 
    return function () { 
        if (!waiting) { 
            callback.apply(this, arguments); 
            waiting = true; 
            setTimeout(function () { 
                waiting = false; 
            }, limit);
        }
    }
}
登录后复制

这个不可配置的函数将目标函数节流到指定的时间间隔,而不需要复杂的选项.

以上是**为什么简单的JavaScript节流函数会消除节流期后的最终执行?**的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!