如何为下一个对话框重置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永远丢失。 它们最终到期，并且关闭功能运行，但是它们完全无效，伴随的对话框早已消失。 对不起，善良的书呆子在这里。