Как добавить задержку перед вызовом следующей функции обратного вызова?

Question

Я пытаюсь создать баннер javascript. У меня есть 3 изображения внутри div с идентификаторами # img1, # img2 n # img3.

<script src="scripts/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
    var AnimState = true; 
    var AnimTime = 2000; 
    var AnimDelay = 3000; 
    $(document).ready(function() 
    { 
     $('#image img').hide(); 
     $('#img3').show(); 
     Show1(); 
    }); 
    function Show1() 
    { 
     if(AnimState === true) 
     { 
      $("#img3").fadeOut(AnimTime); 
      $("#img1").fadeIn(AnimTime, Show2); 
     } 
    } 
    function Show2() 
    { 
     if(AnimState === true) 
     { 
      $("#img1").fadeOut(AnimTime); 
      $("#img2").fadeIn(AnimTime, Show3); 
     } 
    } 
    function Show3() 
    { 
     if(AnimState === true) 
     { 
      $("#img2").fadeOut(AnimTime); 
      $("#img3").fadeIn(AnimTime, Show1); 
     } 
    } 
    $('#btn1').click(function() 
    { 
     AnimState = !AnimState; 
     Show1(); 
    }); 
</script> 

Он отлично работает. Единственное, что теперь я хочу добавить задержку после эффекта fadein, но попробовать diff stuffs я потерпел неудачу. Итак, что можно сделать, чтобы добавить задержку на несколько минут, а затем вызвать только следующую функцию, т.е. Я хочу, чтобы добавить задержку после $("#img3").fadeIn(AnimTime) и после задержки вызывать только Show1() функции

Answer 1

Хорошо, попробуйте это. После анимации:

$("#img1").fadeOut(AnimTime); 
$("#img2").fadeIn(AnimTime); 
setTimeout(Show3, 30000); //delays next call for 30 seconds 

Answer 2

использования $("#img3").fadeIn(AnimTime).delay('1000')

1000 в миллисекундах.

Answer 3

попробовать это

$("#img3").delay('1000').fadeOut(AnimTime); 

Вы должны сделать функцию сна посмотрите here это JQuery plygin использование

:

$.sleep(3, function(){alert("I slept for 3 seconds!");}); 

Answer 4

Что я могу сделать для этого здесь, в этом суть: http://gist.github.com/467030

По сути это чтобы создать совершенно несвязанный набор функций, анимации или нет ..., а затем выполнить их один по одному на данном интервале.

// create an array of functions to be executed 
// everything in each step would be executed simultaneously 
var myFuncs = [ 
    // Step #1 
    function() { 
     $("#img1").fadeOut(200); 
     doSomething(); 
     doSomethingElseAtTheSameTime(); 
    }, 
    // Step #2 
    function() { 
     doOtherStuff(); 
    }, 
    // Step #3 
    function() { 
     woohoo(); 
    } 
]; 

// then, the function in that gist: 
// Simple function queue runner. Just pass me an array of functions and I'll 
// execute them one by one at the given interval. 
var run_queue = function (funcs, step, speed) { 
step = step || 0; 
speed = speed || 500; 
funcs = funcs || []; 

    if (step < funcs.length) { 
     // execute function 
     funcs[step](); 

     // loop it 
     setTimeout(function() { 
      run_queue(funcs, step + 1); 
     }, speed); 
    } 

    return; 
}; 

// run them. 
run_queue(myFuncs, 0, 1000); 

Очевидно, что это проще, чем вы хотели. Но основная идея работает очень хорошо. Даже использование jQuery queue() работает только для выполнения последующих анимаций на одних и тех же элементах. Это могут быть полностью несвязанные функции.

Answer 5

setTimeout(MyFunction(), 3000); 

Я бы сделал это, чтобы просто приостановить 3 секунды перед выполнением MyFunction. Надеюсь, что это поможет ...