Использование setTimeout для задержки синхронизации действий jQuery

Я пытаюсь отложить обмен текста в div. Он должен работать как слайдер/карусель для текста.

У меня должен быть код неправильный, так как окончательная замена текста никогда не произойдет.

Кроме того, как я мог бы представить вводный текст замены (например, оконные шторы)?

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'; return false;" />

        <script type="text/javascript">
$(document).ready(function() {

    $("#showDiv").click(function() {
        $('#theDiv').show(1000, function() {
            setTimeout(function() {
                $('#theDiv').html('Here is some replacement text', function() {
                    setTimeout(function() {
                        $('#theDiv').html('More replacement text goes here');
                    }, 2500);
                });
            }, 2500);
        });
    }); //click function ends

}); //END $(document).ready()

        </script>
    </head>
<body>

    Below me is a DIV called "theDiv".<br><br>
    <div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
        This text is inside the Div called "theDiv".
    </div><br>
    <br>
    <input type="button" id="showDiv" value="Show DIV">



</body>
</html>

Ответы

Ответ 1

.html() принимает только строку ИЛИ функцию в качестве аргумента не обе. Попробуйте следующее:

 $("#showDiv").click(function () {
     $('#theDiv').show(1000, function () {
         setTimeout(function () {
             $('#theDiv').html(function () {
                 setTimeout(function () {
                     $('#theDiv').html('Here is some replacement text');
                 }, 0);
                 setTimeout(function () {
                     $('#theDiv').html('More replacement text goes here');
                 }, 2500);
             });
         }, 2500);
     });
 }); //click function ends

Пример jsFiddle

Ответ 2

Попробуйте следующее:

function explode(){
  alert("Boom!");
}
setTimeout(explode, 2000);

Ответ 3

Вы также можете использовать jQuery delay() method вместо setTimeout(). Это даст вам гораздо более читаемый код. Вот пример из документов:

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

Единственное ограничение (что я знаю) заключается в том, что оно не дает вам возможности очистить тайм-аут. Если вам нужно это сделать, вам лучше придерживаться всех вложенных обратных вызовов, которые setTimeout накладывает на вас.

Ответ 4

Вот как я решил проблему Меню закрывается через несколько секунд после выключения мыши (что, если наведение не срабатывало),

$setM_swith=0; //Set timer switch
$(function(){
        $(".navbar-nav li a").click(function(event) {
            if (!$(this).parent().hasClass('dropdown'))
                $(".navbar-collapse").collapse('hide');
        });
        $(".navbar-collapse").mouseleave(function(){
            $setM_swith=1;
            setTimeout(function(){ if($setM_swith==1){$(".navbar-collapse").collapse('hide');$setM_swith=0;} }, 3000);
        });
        $(".navbar-collapse").mouseover(function(){
            $setM_swith=0;
        });
    });