確保一次只有一個 setTimeout 運行（處於活動狀態）？

Question

遞歸的setTimeout function getRandomProducts在html body標簽中調用onload ，如此不斷迭代。

function onclick 。 這個 function 然后將變量 mainCategory 傳遞給 getRandomProducts，在其中全局聲明該變量以維護其初始化。

...因此，我要做的是在單擊導航欄中的鏈接時重置 getRandomProducts function，並從單擊的鏈接傳遞類別名稱。 但是， 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);
}

Answer 1

您正在 function 中設置變量t 。下次調用此 function 時，您將無法使用 var t 。

因此，將變量設置在 function 以上（不在其中）

var randomProductsTimeout = false;

function getRandomProducts(category){

    randomProductsTimeout = setTimeout()[..]