确保一次只运行一个 setTimeout(处于活动状态)

Ensure only one setTimeout runs (is active) at a time?

本文关键字:setTimeout 活动状态 一个 一次 确保 运行      更新时间:2023-09-26

递归setTimeout函数getRandomProducts在html body标签中被称为onload,因此不断迭代.

函数setCategoryTree是从导航栏的嵌套ul中的链接onclick调用的。然后,此函数将变量 mainCategory 传递给 getRandomProducts,其中变量被全局声明以保持其初始化。

...因此,我正在尝试做的是在单击导航栏中的链接时重置getRandomProducts函数,并从单击的链接中传递类别名称。但是,clearTimeout似乎不起作用,因此迭代发生的频率要高得多,因为同时执行多个递归循环.

不仅如此,我的全局变量没有按预期存储来自setCategoryTree的数据(基本上我尝试使用全局变量类似于静态变量)。我已经通过注释掉的window.alert辨别了所有这些行为.

这是相关的Javascript代码:

var mainCategory = ""; // initialized from setCategoryTree
var category = mainCategory;
function getRandomProducts(category)
{
    //window.alert(category);
    if(typeof category == "undefined")
        category = "all";
    else
        clearTimeout(t);
    var req = new XMLHttpRequest();
    var products = document.getElementById("products");
    req.onreadystatechange = function()
    {
        if( (req.readyState == 4) && (req.status == 200) )
        {
            var result = req.responseText;
            products.innerHTML = result;
        }
    }
    req.open("GET", "default.php?category=" + category, true);
    req.send(null);
    var t = setTimeout("getRandomProducts()", 1000);
}
function setCategoryTree(link)
{
    var categoryTree = document.getElementById("categoryTree");
    /* climbing the DOM-tree to get the category name (innerHTML of highest "a" tag) */
        mainCategory = link.parentNode.parentNode.parentNode.getElementsByTagName("a")[0].innerHTML;
    var subcategory = link.innerHTML;
    categoryTree.innerHTML = "-- " + mainCategory + "  -- " + subcategory;
    getRandomProducts(mainCategory);
}

您正在函数中设置变量t。下次调用此函数时,您将无法使用 var t

因此,将变量设置在函数上方(不在其中)

var randomProductsTimeout = false;
function getRandomProducts(category){
    randomProductsTimeout = setTimeout()[..]