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()一样关闭，也就是说，id为{{1}的div中的每个对话框都会自动关闭}。第一个计时器到期时关闭对话框的全部，因为它们都使用相同的HTML ID。其他计时器运行得很好，但是当它们到期时，他们没有什么可做的。

您可以通过为您创建的每个对话框分配唯一的HTML ID来解决早期关闭问题。并且您还希望在每个对话框的基础上管理您的计时器ID，这样每个对话框都有自己的计时器ID。

编辑： 仅为了讨厌的笑话，请考虑您描述的方案的详细信息。您的第一个计时器正在运行，正常倒计时，并且在第一个对话框仍然存在时启动另外四个计时器。第五个计时器的ID位于变量addToBagDialogBox中。因此，当第一个对话框的计时器到期时，会发生dialogTimer处理，并使用第五个对话框计时器的ID调用close。所以你的第一个对话框的计时器到期，对话框关闭了所有其他对话框，清理取消了第五个计时器。还有其他三个计时器正在运行，他们的ID永远丢失了。它们最终到期并且它们的关闭功能运行，但它们完全没有效果，它们的伴随对话框早已不复存在。对不起，这是真正的书呆子。

如何为下一个对话框重置jquery对话框超时？

1 个答案: