0

我在我们的网站上使用了一个添加到购物袋的按钮，我们希望出现一个动态弹出窗口来确认刚刚添加的内容，然后它就会消失。我发现如果您单击另一个添加按钮，则会附加上一个对话框的超时。为了解决这个问题，下一个对话框有它自己的 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的原因。

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

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

4

1 回答 1

0

I propose an alternate explanation for the behavior you're observing. When you click the first "add to cart", a timer is started. As you go down the page clicking "add to cart", a new timer is started each time. There's no overlap, just a bunch of separate timers running normally (although incidentally, each new dialog box blows away the timer ID you've previously created; I'll come back to this).

When your first dialog's timer expires, the dialog closes itself via the HTML ID, meaning it closes itself with something like a jquery $('div#addToBagDialogBox').closeOrSomethingLikeThat(), that is, every dialog inside a div with an id of addToBagDialogBox. The first timer expiration is closing all of your dialogs, because they all use that same HTML ID. The other timers are running perfectly, but when they expire there's nothing left for them to do.

You can fix the early-close problem by assigning a unique HTML ID to each dialog you create. And you'll want to manage your timer IDs on a per-dialog basis as well, such that each dialog has its own timer ID.

Edit: Just for nerdy grins, think about the details of the scenario you described. Your first timer is running, counting down normally, and you start four other timers while the first dialog is still there. The ID of the fifth timer is in your variable dialogTimer. So when the first dialog's timer expires, the close processing occurs, and you call clearTimeout with the ID of the fifth dialog's timer. So your first dialog's timer expired, the dialog closed all the other dialogs, and the cleanup cancelled the fifth timer. There are three other timers still running, their IDs lost forever. They finally expire and their shutdown functions run, but they're totally without effect, their companion dialogs long gone. Sorry, bona fide nerd here.

于 2014-06-06T00:45:38.030 回答