javascript - 多个 setTimeouts 相互抵消？

Question

我在调用多个 setTimeout 时遇到问题，它们似乎在一个接一个快速触发时相互抵消。

给出这个 fiddle :http://jsfiddle.net/72M6L/ .

显示了这个非常简单的对象:

fadepopup = function (msg) 
{
    $elm = $('<div class="fadepopup"></div>');
    $elm.html('msg');
    $('body').append($elm);

    setTimeout(function () 
    {
        $elm.fadeOut(500, function () 
        {
            $(this).remove()
        });
    }, 1500);
}

如果你按下按钮一次(在 fiddle 中)，一切都很好。
如果快速多次按下按钮，div 不会被删除。

为什么会发生这种情况，我该如何解决？

Answer 1

您正在使用全局变量 $elm .当您在超时执行之前单击按钮时，变量已被覆盖，并且方法 ( $elm.fadeOut ) 不再绑定(bind)到该元素(因为该变量是指代创建的最新元素)。

我的建议是使用var在函数中使其成为本地:

var $elm = $('<div class="fadepopup"></div>');

参见 update fiddle