如何在 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 处理程序之外运行，并且只看到“外部”变量。

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

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

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

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