如何在没有外部库的情况下用 JavaScript 实现简单的节流功能？

无需外部库的 JavaScript 中的简单节流

简介

在 JavaScript 中，节流是一种用于限制速率的技术可以执行函数的位置。

自定义节流函数

提供的自定义节流函数虽然有效，但有一个缺陷，即它会在节流时间完成后再次触发该函数。这是一个改进的版本：

<code class="js">function throttle(fn, wait, options) {
  if (!options) options = {};
  var context,
    args,
    result,
    timeout = null,
    previous = 0;
  var later = function () {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = fn.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  wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = fn.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
}</code>

此版本通过实现前缘和后缘行为的可自定义选项，解决了节流周期后多次触发的问题。

简化的节流功能

如果您不需要高级选项，可以使用简化的、不可配置的节流功能：

<code class="js">function throttle(callback, limit) {
  var waiting = false;
  return function () {
    if (!waiting) {
      callback.apply(this, arguments);
      waiting = true;
      setTimeout(function () {
        waiting = false;
      }, limit);
    }
  };
}</code>

以上是如何在没有外部库的情况下用 JavaScript 实现简单的节流功能？的详细内容。更多信息请关注PHP中文网其他相关文章！