Javascript 如何正确地消除ajax请求的影响

我有一个复选框，可以切换某些行为，但是如果有人连续单击100次，我不想向我的服务器端发送100个请求

这是我到目前为止得到的（找到了这个代码片段）：

在“我的文档准备”功能中：

deBouncer(jQuery,'smartoggle', 'click', 1500);

然后事件本身：

$(window).smartoggle(function(e){
  MyToggleFunction();
});

这是因为我将1500毫秒设为去抖动周期，所以如果在1500毫秒内单击n次，它将只向服务器发送最新状态

---

然而，使用它也有副作用，现在我对其他东西的点击事件被搞砸了。我做错什么了吗？有没有更好的方法来消除抖动？

不确定是否有“合适”的方法来消除抖动

已经说过下划线有这样一个实用程序，它将创建函数的非公告版本

var MyToggleDebounced = _.debounce(MyToggleFunction, 1500);

然后在单击处理程序中使用

MyToggleDebounced

---

看看带注释的源代码是如何实现的。

只需对执行实际工作的函数进行解块，我不会为此加载整个库

var debouncedSomeFunction=debounce（someFunction，1500）； 去BouncedSomeFunction（）； 去BouncedSomeFunction（）； 去BouncedSomeFunction（）； setTimeout（debouncedSomeFunction，2000）； 函数去抖动（fn，缓冲间隔）{ var超时； 返回函数（）{ clearTimeout（超时）； timeout=setTimeout（fn.apply.bind（fn，this，arguments），bufferInterval）； }; } 函数someFunction（）{ 日志（'someFunction executed'）； } 功能日志（文本）{ document.body.appendChild（document.createTextNode（text））； document.body.appendChild（document.createElement（'br'））；

---

}我认为这个问题比第一个问题看起来要好。Http Ajax请求的工作方式有一个警告。如果您将延迟设置为1500ms，并且您可以保证每个请求都在这个时间范围内得到满足，那么其他答案就可以正常工作。但是，如果任何请求速度明显减慢，则请求可能会出现故障。如果发生这种情况，最后处理的请求将显示数据，而不是最后发送的请求

我编写这个类是为了避免这个警告（使用Typescript，但您应该能够阅读它）：

---

这将防止同时处理两个ajax请求，如果有一个请求挂起，这将发送另一个请求。

您肯定在这里写。。不过，我只会将此事件绑定到有问题的复选标记。这可能会让你简化一些其他的编码。@JeremyJStarcher你能举例说明你的意思吗？我需要看看你的标记。。。我知道这是伪代码，但我真的很困惑最后一行的自我引用意味着什么。也许你可以更新你的答案，展示你函数的一个简单实现？我尝试了这段代码，但无法使其工作。为了清楚起见，以防其他人被最后一行搞糊涂。。。应该是*var yourFunction=function（）{}；yourFunction=debounce（yourFunction，1500）@geoidesic我修改了代码，希望这更容易理解。

var MyToggleDebounced = _.debounce(MyToggleFunction, 1500);

export class AjaxSync {

  private isLoading: boolean = false;
  private pendingCallback: Function;
  private timeout;

  public debounce(time: number, callback: Function): Function {
    return this.wrapInTimeout(
      time,
      () => {
        if (this.isLoading) {
          this.pendingCallback = callback;
          return;
        }
        this.isLoading = true;
        callback()
          .then(() => {
            this.isLoading = false;
            if (this.pendingCallback) {
              const pendingCallback = this.pendingCallback;
              this.pendingCallback = null;
              this.debounce(time, pendingCallback);
            }
          });
      }
    );
  }

  private wrapInTimeout(time, callback) {
    return () => {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(callback, time);
    };
  }
}