油门函数返回（...args），返回函数（...args）答案

【问题标题】：throttle functions return(...args),return function(...args)油门函数返回（...args），返回函数（...args）
【发布时间】：2021-03-15 07:54:15
【问题描述】：

您好，我正在尝试学习节流的概念，我已经阅读了一些文章，并且“有点”掌握了它（至少是这个概念）但是在阅读这些文章时我无法弄清楚一件事函数，并且是您返回带有“参数”的函数的部分，例如在我发现的这些函数中：

  const throttleFunction = (func, delay) => {
        let prev = 0;
        return (...args) => {
            let now = new Date().getTime();
            if (now - prev > delay) {
                prev = now;
                return func(...args);
            }
        }
    }
    
    const throttle = (func, limit) => {
        let inThrottle
        return function() {
          const args = arguments
          const context = this
          if (!inThrottle) {
            func.apply(context, args)
            inThrottle = true
            setTimeout(() => inThrottle = false, limit)
          }
        }
      }

我不明白是什么

return (...args) => {
    
            return func(...args);
        }

确实另一个也一样

 const args = arguments
   func.apply(context, args)

事实上，我在尝试使用它们时遇到了一些麻烦，有时我让它们工作，但有时我不这样做，尤其是当我必须将参数传递给我想要限制的函数时

当我只有一个按钮时，我通常会这样做

<button onclick="throttleFunction(some_function,1500)">Click me</button>

它可以工作

但是当我必须通过“this”之类的东西时，我无法得到它假设我有一些 div 我愿意

const func = (thhis) => {
 console.log(thhis);
}
const x = throttleFunction(func,2500);

<div class="abc" onclick="x(this)"> something </div>
<div class="abc" onclick="x(this)"> something </div>
<div class="abc" onclick="x(this)"> something </div>

而且它不起作用，每次我点击 div 时都会调用该函数...

谁能解释一下？

【问题讨论】：

我做了这个 js 小提琴：jsfiddle.net/9hoant7d 来测试你的声明and it doesn't work the function gets called every time i click on the div...，这对我来说似乎不是真的 jsfiddle。它似乎可以很好地限制它。
window.x 有什么作用？
确保x 功能在您放入html onclick="" 区域时可用
好的...我发现了为什么这不起作用，因为我使用的是箭头函数，当我通过“this”时它不起作用，我改写为function(..args) (...args) =>{}anywai 我还是不明白return (...args) => { return func(...args); }这句话是什么意思
关于你最后的评论......你正在处理Spread syntax。这就是在此代码示例中接收和传递参数的方式。当然throttleFunction 的实现并没有考虑this 上下文，这意味着可以安全地将普通函数而不是上下文敏感方法转换为它们自身的节流变体。

标签： javascript functional-programming arguments throttling args

【解决方案1】：

节流的概念实际上是为了避免后续函数调用在有限的时间内执行。

打个招呼

在x 时间内抑制任何进一步的函数调用

使函数再次可调用。

您真的可以将其视为函数调用的速率限制...

const throttle = (ms, fn) => {
  let scheduler;
  
  return (...args) => {
    if (scheduler) {
      return null;
    }

    fn(...args);
    

    scheduler = setTimeout(
      () => {
        scheduler = null;
      },
      ms
    );
  }
}

const logger = throttle(
  500,
  console.log, 
);

logger('Ciao');

// this is not called
logger('Bello');
logger('Bello');
logger('Bello');
logger('Bello');
logger('Bello');
logger('Bello');

setTimeout(() => logger('Ciao Bello'), 600, 'Ciao Bello');

您可以在此link 了解arguments 变量，它是一个创建的变量并且旧函数的调用...基本上不再推荐它，因为您可以改用array spread operator。李>
您可能还想了解debouncing

【讨论】：