如何在 jQuery / JS 的每个函数中使用 setTimeout 在 2 个 Ajax 函数之间切换？

Question

我有 2 个 Ajax 函数，每个函数读取一组数字。这只是一个演示，因此假设语法正确且所有数据加载正确。每个函数都有一个 setTimeout，每 2 秒重新加载一次数据。

我正在尝试在我可以执行的 2 个功能之间切换，但我似乎无法在切换时停止触发超时。两个超时同时触发。

这是 HTML 文件 -

<button class="btn low-btn">Get Low Numbers</button>
<button class="btn high-btn">Get High Numbers</button>

<div class="numbers"></div>

<script src="data.js"></script>

这是 data.js 文件 -

$(document).ready(function(){ 
    var timeout_high;
    var timeout_low;

    function low() {
        $.ajax('get-low.php', {
            success: function (data) {
                $(".numbers").replaceWith("<div class='numbers'>Low Numbers: "+data+"</div>");
                var timeout_low = setTimeout(low, 2000);
           } 
       });
    }

  function high() {
        $.ajax('get-high.php', {
           success: function (data) {
              $(".numbers").replaceWith("<div class='numbers'>High Numbers: "+data+"</div>");
              var timeout_high = setTimeout(high, 2000);
           } 
       });
    }



    $(".low-btn").click(function(){
         clearTimeout(timeout_high);
         low();
    });


    $(".high-btn").click(function(){
        clearTimeout(timeout_low);
        high();
    });

});

我尝试在单击按钮后使用 clearTimeout，但它不会终止超时，但两个函数都会继续触发。如果我一直点击它只会不断添加更多超时。

Answer 1

下面两行：

var timeout_low = setTimeout(low, 2000);
var timeout_high = setTimeout(high, 2000);

... 而不是将新值分配给在 $(document).ready 函数开头定义的变量，创建 新变量 ，局部于相应的函数。因此 clearTimeouts 实际上什么都不做 - 它们运行在 ajax:success 处理程序之外，并且只看到 'outer' 变量。

（是的，clearTimeout(undefined)既不抛出也不警告）

最简单的解决方案是从这些语句中删除 var：

timeout_low = setTimeout(low, 2000);
timeout_high = setTimeout(high, 2000);

不过，我强烈考虑将这些函数合并为一个函数，使用某种字典，将数据获取器和结果应显示在其中的元素捆绑在一起。

如何在 jQuery / JS 的每个函数中使用 setTimeout 在 2 个 Ajax 函数之间切换？

How can I switch between 2 Ajax functions with a setTimeout in each function in jQuery / JS?

javascript

ajax

jquery

function

settimeout