在回调中访问参数 (javascript)

Posted 2023-02-22

【中文标题】在回调中访问参数 (javascript)

【英文标题】：Accessing arguments within a callback (javascript)

【发布时间】：2022-01-22 09:41:14

【问题描述】：

我正在尝试编写一个“去抖动”函数，但我被困在一段代码中。在下面的代码中，我将回调传递给addEventListener，并将其包装在debounce 函数中。

这个函数稍后会有更多的功能，但现在，我只想让它返回一个函数，它将设置一个超时delay毫秒，然后使用参数调用原始函数（在本例中为e )。

我的问题在于debounce 函数中的callback("original-args")。我想用传递给回调的实际参数替换“original-args”。如何访问该论点？

  button.addEventListener("click", debounce(e => 
    let elem = document.createElement("P"); 
    elem.textContent = "Clicked";
    container.appendChild(elem);
  , 2000))

  function debounce(callback, delay) 
    return function() 
      setTimeout(() => 
        callback("original-args")
      , delay)
    
  

【参考方案1】：

您可以执行以下操作：

button.addEventListener(
  "click",
  debounce(
    (e) => 
      let elem = document.createElement("P");
      elem.textContent = "Clicked";
      container.appendChild(elem);
    ,
    2000
  )
);

function debounce(callback, delay) 
  return function (...args) 
    setTimeout(() => 
      callback(...args);
    , delay);
  ;

因此您可以将...args 传递给您的去抖动函数。 ...args 是一个扩展运算符，表示take any number of arguments and store them inside the variable args。