Question

测试这个，我试图找出如果我点击另一个属性如何停止延迟。我会发布网站地址，以便更好地解释这个问题，但基本上当你按下菜单时我的导航会出现延迟，当我按下作业6时，我希望其他所有内容都隐藏，它确实如此，但我看到了因为我当它隐藏时会有延迟并且没有延迟它将继续打印出其余的元素，即使它们应该被隐藏。另外一个免责声明，我之前在这个网站上得到了很多热，因为我认为人们认为我期待一个答案。事实并非如此，我喜欢学习，虽然答案很有帮助，但我能够去除它并学习它，我宁愿有一些指导。所以，是的，如果有人认为这就是我在这里的话，我不仅仅是在寻找答案（当我无法用其他任何方式解决时，我来到这里）。

site

我的jQuery脚本：

$(document).ready(function () {

    //$('ul').hide();
    $('ul li').hide();
    $('nav>li').hide();

    $('nav>h1>').click(function (event) {
        event.preventDefault();
        $('nav>ul li:hidden').each(function(i) {
            $('nav>li').show();
            $('nav>h1').hide();
            $(this).delay(i*600).fadeIn(200);
        });

        $('nav>ul li:visible').each(function(i) {
            $('nav>h1').hide();
            $(this).delay(i*600).fadeOut(200);
        });

        return false;

    }); //closes a.btnDown

     $('nav>li').click(function (event) {
        $('nav>h1').show();
        $('nav>li').hide();
        $('ul li').hide();

        return false;

        }); //closes a.btnDown
}); //closes .ready

Answer 1

您可以使用setTimeout替换延迟，并使用clearTimeout

清除这些延迟

$('nav>ul li:hidden').each(function(i) {
    $('nav>li').show();
    $('nav>h1').hide();
    var fadeTimeout = setTimeout(function () {
      $(this).fadeIn(200);
    }, i * 600);
});

$('nav>li').click(function (event) {
    $('nav>h1').show();
    $('nav>li').hide();
    $('ul li').hide();
    clearTimeout(fadeTimeout);
    return false;
});

Answer 2

setTimeout是一种有用的机制来解决你的问题。它等待（至少）指定的延迟，并执行回调函数。

var elements = $('nav>ul li:hidden');

var timeoutId;
function doAnimation(index) {
    timeoutId = window.setTimeout(function () {
        if (index < elements.length) {
            $(elements[index]).fadeIn(200);
            doAnimation(++index);
        }
    }, 600);
}

线索是在递归函数之外声明timeoutId，并在函数内分配它。通过以递归方式执行，您不会在当前超时完成之前启动下一个超时，并且可以随时中止。

window.clearTimeout(timeoutId);

我做了一个演示这个概念的小提琴，但我没有实现完整的解决方案。希望这有助于您进一步完成项目。

http://jsfiddle.net/pyMpj/

如果单击属性，如何停止延迟

2 个答案: