如何为下一个对话框重置 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 以便 >关闭对话框。

所有这些都很好。只是计时器的重置似乎没有发生。如果我浏览一页产品并将每个产品添加到我的包中，第三或第四个对话框只会出现一秒钟左右，因为它们都在使用第一个对话框 setTimeout。

我已经阅读和阅读并尝试了太多不同的方式来记忆，现在我的大脑一片混乱。

Answer 1

我为您观察到的行为提出了另一种解释。当您单击第一个“添加到购物车”时，将启动一个计时器。当您点击“添加到购物车”页面时，每次都会启动一个新计时器。没有重叠，只是一堆单独的计时器正常运行（尽管顺便提一下，每个新对话框都会清除您之前创建的计时器 ID；我会回到这个）。

当您的第一个对话框的计时器到期时，对话框会通过 HTML ID 自行关闭，这意味着它会使用类似 jquery $('div#addToBagDialogBox').closeOrSomethingLikeThat() 的内容自行关闭，即 id 为 addToBagDialogBox 的 div 中的每个对话框。第一个计时器到期将关闭您的所有对话框，因为它们都使用相同的 HTML ID。其他计时器运行良好，但当它们到期时，它们将无事可做。

您可以通过为您创建的每个对话框分配一个唯一的 HTML ID 来解决提前关闭问题。此外，您还需要在每个对话的基础上管理计时器 ID，以便每个对话都有自己的计时器 ID。

编辑：只是为了书呆子的笑容，想想你描述的场景的细节。您的第一个计时器正在运行，正常倒计时，当第一个对话框仍然存在时，您启动了其他四个计时器。第五个计时器的 ID 在您的变量 dialogTimer 中。因此，当第一个对话的计时器到期时，会发生close 处理，并且您使用第五个对话的计时器的ID 调用clearTimeout。因此，您的第一个对话框的计时器已过期，该对话框关闭了所有其他对话框，并且清理取消了第五个计时器。还有其他三个计时器仍在运行，它们的 ID 永远丢失了。它们最终到期并且它们的关闭功能运行，但它们完全没有效果，它们的伴随对话框早已消失。对不起，这里是真正的书呆子。