jQuery函数创建异常暂停

Question

EDIT: created a fiddle which shows the problem https://jsfiddle.net/MichaelCaley/wcoba1jy/

The below code creates a 7 second pause between each fade until we get to the end where the code re runs itself. For some reason this delay becomes 14/15 seconds.

I have done a lot of searching but come up with trump all, so any help is appreciated.

    var imgshow = function(){
    $(".img1").delay(7000).fadeOut(1500, function(){
        $(".img2").delay(7000).fadeOut(1500, function(){
            $(".img1").delay(7000).fadeIn(1500, function(){
                $(".img2").delay(7000).fadeIn(1500, function(){
                    imgshow();
                });
            });
        });
    });
}
imgshow();

Answer 1

It's actually functioning as coded (but probably not as you intended :-)). What's happening is that the 2nd fadeIn has (visually) no effect because img2 is under img1 (which is fully opaque) causing img1 to stay twice as long.

Hopefully the following makes it clear - 1 indicates fully opaque and 0 indicates fully transparent

• img3 (1) under img2 (1) under img1 (1) => img1 shown
• img3 (1) under img2 (1) under img1 (0) => img2 shown
• img3 (1) under img2 (0) under img1 (0) => img3 shown
• img3 (1) under img2 (0) under img1 (1) => img1 shown
• img3 (1) under img2 (1) under img1 (1) => img1 shown (when you probably want img2) ...

If you swap the last 2 fadeIn , you'll get something that changes color every interval ( https://jsfiddle.net/xx303tdc/ ) but the sequence will be img1, img2, img3, img2, img1... Otherwise you could just set img2 to be fully visible after the img1 fadeIn and then restart the loop.

In any case, because you are doing a recursive call, you'll eventually run out of stackspace (very slowly because of the delay), so it might be a good idea to refactor to use CSS transitions.