如何為下一個對話框重置jQuery對話框超時？

Question

我在整個網站上都有一個“添加到購物袋”按鈕，我們希望出現一個動態彈出窗口以確認剛剛添加的內容，然后它消失了。 我發現，如果您單擊另一個添加按鈕，它將附加上一個對話框的超時。 為了解決這個問題，以便下一個對話框具有自己的10,000 setTimeout，而不是上一個對話框剩下的任何內容，我提供了以下代碼（不起作用）。

$(document).ready(function ()
{
    // Create object for future dialog box - so it's available to the close method
    var addToBagDialogVar = $('<div id="addToBagDialogBox"></div>');
    var autoCloseTimeout = 10000;
    var dialogTimer;

    $(".addToBagPU").click(function (e)
    {
        var result = "";
        $.get(this.href, function (data) { SetData(addToBagDialogVar, data); });
        return false;
    });

    // Start listening for the close link click
    $(document).on("click", "#bagPUCloseLink", function (event)
    {
        event.preventDefault();
        CloseDialog(addToBagDialogVar);
    });

    function SetData(addToBagDialogVar, data)
    {
        result = data;
        var regex = data.match("{{(.*)}}");
        var bagCount = regex[1];

        addToBagDialogVar.html(result).dialog({
            open: function ()
            {
                clearTimeout(dialogTimer);
                $(".ui-dialog-titlebar-close").hide();
                SetBagCount(bagCount),
                dialogTimer = setTimeout(function () { CloseDialog(addToBagDialogVar); }, autoCloseTimeout);
            },
            show: { effect: "fadeIn", duration: 800 },
            close: function () { clearTimeout(dialogTimer); },
            width: 320
        });
    }

    function CloseDialog(closeThisDialog)
    {
        closeThisDialog.dialog("close");
        closeThisDialog.dialog("destroy").remove();
    }
});

該對話框從外部.Net頁面加載了帶有產品數據的動態內容，並且該頁面內具有一個緊密鏈接，這就是為什么將該對話框加載到addToBagDialogVar中以便對CloseDialog可用的原因 。

所有這些都很好。 只是似乎沒有發生計時器的重置。 如果我瀏覽產品頁面並將每個產品添加到我的購物袋中，則第3或第4對話框只會顯示一秒鍾左右，因為它們都使用了第一個對話框setTimeout。

我已經閱讀，閱讀並嘗試了太多不同的方式來記住，現在我的大腦變得糊塗了。

Answer 1

我對您觀察到的行為提出了另一種解釋。 當您單擊第一個“添加到購物車”時，將啟動一個計時器。 當您在頁面上單擊“添加到購物車”時，每次都會啟動一個新計時器。 沒有重疊，只有一堆單獨的計時器正常運行（盡管順便說一句，每個新對話框都會吹走您先前創建的計時器ID；我將返回到此）。

當第一個對話框的計時器到期時，該對話框會通過HTML ID自行關閉，這意味着它會使用類似jquery $('div#addToBagDialogBox').closeOrSomethingLikeThat()關閉自身，即div中ID為的每個對話框addToBagDialogBox 。 第一次計時器到期將關閉所有對話框，因為它們都使用相同的HTML ID。 其他計時器運行良好，但是當它們到期時，它們什么也沒做。

您可以通過為創建的每個對話框分配唯一的HTML ID來解決提前關閉問題。 而且，您還希望基於每個對話框管理計時器ID，以便每個對話框都有自己的計時器ID。

編輯：僅出於討厭的笑容，請考慮您所描述的方案的詳細信息。 您的第一個計時器正在運行，正常進行倒計時，而第一個對話框仍在其中時，您將啟動另外四個計時器。 第五個計時器的ID在您的變量dialogTimer 。 因此，當第一個對話框的計時器到期時，將進行close處理，並使用第五個對話框的計時器的ID調用clearTimeout 。 因此，第一個對話框的計時器已到期，該對話框關閉了所有其他對話框，並且清除操作取消了第五個計時器。 另外三個計時器仍在運行，其ID永遠丟失。 它們最終到期，並且關閉功能運行，但是它們完全無效，伴隨的對話框早已消失。 對不起，善良的書呆子在這里。