如何限制由“window.postMessage()”事件调用的函数

Question

我正在开发一个应用程序，我在其中发出不同的 window.postMessage() 请求来传递消息。当我用 window.addEventListener('message', cb) 收听一条消息时，我会调用另一个函数，但有时我会收到对该函数的多次调用，因为这取决于我 post 该消息的次数。我创建了一个简单的节流函数，它运行良好，但不适用于函数调用。例如，假设函数在 1000ms 内被调用三次，则函数应该被调用一次而不是三次。

我想知道这是预期的行为，但在我的例子中，该函数被调用了三次。

我使用了 this answer, also this 中的节流功能是示例 fiddle 我创建的以了解我的意思。

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 && options.trailing !== false) {
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  }

  document.getElementById("btn").addEventListener(
    "click",
    throttle(function () {
      console.log("BUTTON CLICKED");
    }, 1000)
  );

  window.addEventListener("message", ({ data }) => {
    if (data.type === "viewer:clear:cache") {
      throttle(test(), 1000);
    }
  });

  function test() {
    console.log("TEST CALLED");
  }

  for (let i = 0; i < 5; i++) {
    window.postMessage({ type: "viewer:clear:cache" }, "*");
  }

    <button id="btn">CLICK ME</button>

Answer 1

请注意在单击处理程序的情况下，您如何将 throttle 的 return 值传递给 addEventListener。在消息事件的情况下，您在事件处理程序中调用 throttle 并忽略 return 值。

您也没有将函数传递给 throttle，而是传递 test() 的 return 值 。 IE。您先调用 test，然后将 undefined 传递给 throttle。这就是每次调用消息事件处理程序时调用 test 的原因。

您需要的是：

window.addEventListener("message", throttle(({ data }) => {
  if (data.type === "viewer:clear:cache") {
    test();
  }
}, 1000));

throttle return 是一个新函数，它是那个需要在接收到事件时调用的函数。

如何限制由“window.postMessage()”事件调用的函数

How to throttle a function which is called by `window.postMessage()` event

javascript

performance

dom-events

throttling