如何在继续操作之前在功能末尾添加暂停 [英] how to add pause at end of function before moving on

问题描述

我尝试过早发布此内容，但投票决定将其关闭.是的，我已经阅读了相关主题，但无法弄清楚，这就是为什么我问这个问题.

I tried posting this earlier, but it was voted to be closed. Yes, I have read related topics and cannot figure it out, which is why Im asking the question.

我有一个带几个李氏的ul. li的淡入，当列表中的最后一个li淡出时，下一个ul淡入.我想添加一个延迟，以便当每个ul的最后li淡入时暂停，然后淡出并移至下一个列表.

I have a ul that has several li's. The li's fade in, and when the last one fades in the list fades out and the next ul fades its li's in. I want to add a delay so that when the last li of each ul fades in it pauses before fading out and moving onto the next list.

HTML

<ul>
    <li>one</li>
    ...etc
</ul>
//several other <ul> with same markup

JS

function AnimateList($listItems, index, callback) {
    if (index >= $listItems.length) {
        $listItems.closest("ul.contracts").fadeOut(function() {
            $listItems.css("left","400px").css("opacity",0); //reset
            callback(); //next list
        });
        return;
    }

    $listItems.eq(index).animate({left:0, opacity:1}, 1500, function() {
        AnimateList($listItems, index+1, callback)
    });
}

function FadeLists($lists, index) {
    if (index >= $lists.length) index = 0;
    var $currentList = $lists.eq(index);
    $currentList.fadeIn(function() {
        AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) });
    })
}

var $allLists = $("ul.contracts")
FadeLists($allLists, 0);

我尝试使用setTimeout()，delay()和.each函数，但是没有任何效果.另外，我在这里不了解回调"的用法.同样，我已经读过类似的问题，但是找不到我足够理解的东西来翻译，所以我在这里问.谢谢.

I have tried using setTimeout(), delay(), and an .each function but nothing works. Also, I don't understand the use of 'callback' here. Again, I have read similar questions but can't find anything that I understand enough to translate, so Im asking here. Thank you.

我尝试添加以下代码，以尝试在FadeLists函数运行一次后对其进行修改(不想在初次运行时出现延迟，仅在函数的后续运行中如此)

I have tried adding the following code in an attempt to modify the FadeLists function after it has run once (don't want delay on initial run, only on subsequent runs of the function)

var myFuncCalls = 0;
function FadeLists($lists, index) {
    myFuncCalls++;
    if(myFuncCalls <= 1) {
        if (index >= $lists.length) index = 0;
        var $currentList = $lists.eq(index);
        $currentList.fadeIn(function() {
            AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) });
        })
    } else if(myFuncCalls > 1) {
        console.log('I have been called' + myFuncCalls + 'times');
    }
}

var $allLists = $("ul.contracts")
FadeLists($allLists, 0);

推荐答案

您在说这样的话吗?如果要立即开始淡出，可以删除第一个setTimeout.

Are you talking something like this? If you want to start the fadeout immediately, you can remove the first setTimeout.

function AnimateList($listItems, index, callback) {
    if (index >= $listItems.length) {
            //hit end of current list, set a timeout to begin fade
            window.setTimeout(function(){
                $listItems.closest("ul.contracts").fadeOut(function() {
                    $listItems.css("left","400px").css("opacity",0); //reset
                    //set timeout to allow fade to complete
                    window.setTimeout(function(){
                        callback(); //next list
                    },500)
                });
            },1000);
        return;
    }


    $listItems.eq(index).animate({left:0, opacity:1}, 1500, function() {
        AnimateList($listItems, index+1, callback)
    });
}

这篇关于如何在继续操作之前在功能末尾添加暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！