在特定时间后运行 ajax 请求答案

【问题标题】：Run ajax request after specific time在特定时间后运行 ajax 请求
【发布时间】：2020-08-31 19:03:28
【问题描述】：

您好，我正在开发一个带有颜色滑块的网站，该滑块在幻灯片更改后将特定颜色页面附加到 DOM。我希望人们仍然能够非常快速地浏览不同的幻灯片并加载 ajax 页面，前提是用户没有在特定时间（例如 1000 毫秒）内更改幻灯片。我尝试了 setInterval、setTimeout 和 ajax 超时参数，但它不起作用，它只是将请求添加到调用堆栈，并在超时持续时间后附加 div 5 次。

这里是 ajax 调用：

$.ajax({
     url: "/wp-admin/admin-ajax.php",
     type:"POST",
     data: {
         action: "my_custom_color",
             post_link: post_ID
     }, success: function (response) {

         $('.color').prepend(response);

     },
})

我希望能够做这样的事情：

colorsMonoSlider.events.on('indexChanged', () => {
        setTimeout(() => {
            customizedFunction()
        }, 1000);
    });

但是如果不填充调用堆栈（可能在每次调用时清空它），ajax 请求应该只在超时后触发一次，我不能禁用滑块导航或使用async: false，因为正如我所说的用户需要能够通过垃圾邮件点击快速通过滑块。

欢迎任何提示，在此先感谢。

【问题讨论】：

听起来你想debounce 事件 - 有多种方法可以做到这一点或可用插件（SO 上已经有许多答案） - 但基本上你存储setTimeout 变量然后在事件发生时取消超时接下来调用。

标签： javascript jquery ajax

【解决方案1】：

在再次调用之前，您需要取消 ajax 调用和计时器功能。假设自定义函数有ajax调用。

var xhr,timer;
    function customizedFunction(){
    xhr && xhr.abort();
    xhr = $.ajax({
             url: "/wp-admin/admin-ajax.php",
             type:"POST",
             data: {
                 action: "my_custom_color",
                     post_link: post_ID
             }, success: function (response) {
        
                 $('.color').prepend(response);
        
             },
        })
    
    }


colorsMonoSlider.events.on('indexChanged', () => {
        timer && clearTimeout(timer);
        timer =  setTimeout(() => {
            customizedFunction()
        }, 1000);
    });

【讨论】：