jquery - 使用 stop() 加速 Jquery delay()

Question

这是我的问题的一个摆弄:

http://jsfiddle.net/5c8ZL/

我有三个按钮:

<button>Button A</button>
<button>Button B</button>
<button>Button C</button>

每个按钮都会触发一些AJAX来拉取数据，并根据响应使用react。

如果没有返回数据，则会显示错误警报并延迟淡入淡出，如下所示:

if ( no_data )
{
    $error.show().delay(6000).fadeoutOut("slow");
}
else 
{
    // we have data, do some stuff
}

因此，如果按钮 B 没有返回数据并显示警报，并且我快速单击有数据的按钮 C，则错误警报将一直保留，直到延迟完成，这不是有意的。

我尝试向 else block 添加隐藏函数:

if ( no_data )
{
    $error.show().delay(6000).fadeOut("slow");
}
else 
{
    $error.hide(); // we don't want the alert to keep showing

    // we have data, do some stuff
}

太好了，现在成功的查询会删除显示的警报。但是，如果(如上所述)我单击按钮 B，收到错误(触发警报)，然后单击按钮 C 并且警报被删除...然后我再次(快速)单击按钮 B，之前的延迟是仍在动画队列中，并且几乎立即删除警报。

有没有一种方法可以:

if ( no_data )
{
    $error.show().delay(6000).fadeOut("slow");
}
else 
{
    // kill the previous fadeOut, then...

    $error.hide();

    // do other stuff
}

我尝试添加停止功能:

$error.stop(true, true).hide();

但它似乎仍然不起作用。我认为这是因为由于延迟而队列中没有动画，因此停止函数实际上从未删除任何内容。

我做错了什么？

Answer 1

setTimeout() 和clearTimeout() 可以解决这个问题:

    var $a = $('#btn-a');
    var $b = $('#btn-b');
    var $c = $('#btn-c');
    var $x = $('#alert');
    var timerHandle;

    $a.on('click', function (e) {
        $x.show();
        timerHandle = setTimeout(function () {
            $x.fadeOut("slow");;
        }, 6000);
    });

    $b.on('click', function (e) {
        $x.show();
        timerHandle = setTimeout(function () {
            $x.fadeOut("slow");;
        }, 6000);
    });

    $c.on('click', function (e) {
        $x.hide();
        clearTimeout(timerHandle);
    });