Как добавить задержку в JavaScript?

Question

Как добавить задержку в JavaScript?

0

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            $(".box02").hide();
                $("#select-02").change(function(){
                    $( "select option:selected").each(function(){
                        if($(this).attr("title")=="0b"){
                            $(".box02").hide();
                            $(".none").show();
                        }
                        if($(this).attr("title")=="1b"){
                            $(".box02").hide();
                            $(".1b").show();
                        }
                        if($(this).attr("title")=="2b"){
                            $(".box02").hide();
                            $(".2b").show();
                        }
                    });
                }).change();
            });
        </script>
    </head>

<body>          
    <select name="roomcount" id="select-02">
        <option title="0b">---</option>
        <option title="1b">1</option>
        <option title="2b">2</option>
    </select><br/><br/>

    <p class="current count">
        <b>Content:</b>
        <br/>
        <div class="padding-box">
            <span class="none box02">...</span>
            <span class="1b box02">show content 1 with delay</span>
            <span class="2b box02">show content 2 with delay</span>
        </div>
    </p>
</html>

Как добавить задержку между преобразованием "span" в другой "span"? Пожалуйста, только измените что-то в скрипте jquery, потому что я использую его на нескольких сайтах и не могу легко их обновить и просто изменить код, который легче изменить.

Пример этой задержки находится на этой странице: http://store.apple.com/us/buy-mac/mac-pro?product=ME253LL/A&step=config, если вы меняете радиовход, перед этим возникает небольшая задержка изменения.

Спасибо, Sake

user3438393 30 март 2014, в 14:33

Источник

0

Что значит задержка? Есть slideUp / Down, fadeOut / In и т. Д. Просто замените hide() на fadeOut() и show() на fadeIn() ? Если вам просто нужна задержка, вы можете сделать $(".none").delay(1000).show(1);
adeneo 30 март 2014, в 12:24
0

Ваше рабочее демо не работает. Ошибка в строке 9 в Chrome.
Christian Duvall 30 март 2014, в 12:25
0

Мне не понравились решения, предоставленные вам в ответах. Show и Hide имеют необязательный аргумент «options», в котором вы можете предоставить обратный вызов после завершения анимации, например, $ ('. MyElement'). Show ({complete: callBackFunctionToCall}); который может вызвать следующий экземпляр вашей анимации, конечно, он может быть отделен еще лучше, но это лучшее направление.
deb0rian 30 март 2014, в 12:38

Показать ещё 1 комментарий

Теги:

javascript

jquery

delay

3 ответа

2

используйте setTimeout().

Функция принимает исполняемую функцию и миллисекунды для ожидания выполнения

Например, если вы хотите отсрочить выполнение функции на 5 секунд, вы можете сделать это:

setTimeout(functionName,5000);

Также обратите внимание: 1 секунда = 1000 миллисекунд.

Если у вас нет функции, вы можете поместить свой код в анонимную функцию.

setTimeout(function(){
 //do something here
},5000);

Кроме того, в jquery есть функция delay(), которая используется для анимации

Amit Joki 30 март 2014, в 11:07

0

Где я должен это разместить ?, я не очень хорош со сценариями
user3438393 30 март 2014, в 12:23

0

 $(".box02").hide();
    $("#select-02").change(function(){
      $( "select option:selected").each(function(){
        if($(this).attr("title")=="0b"){
          $(".box02").delay(100).slideUp(500);
          $(".none").delay(100).slideDown(500);
        }
        if($(this).attr("title")=="1b"){
          $(".box02").delay(100).slideUp(500);
          $(".1b").delay(100).slideDown(500);
         }
        if($(this).attr("title")=="2b"){
          $(".box02").delay(100).slideUp(500);
          $(".2b").delay(100).slideDown(500);
         }
      });
  }).change();

Демо - версия:

http://jsfiddle.net/BrKLU/3/

RGS 30 март 2014, в 10:42

Ещё вопросы

Что значит задержка? Есть slideUp / Down, fadeOut / In и т. Д. Просто замените hide() на fadeOut() и show() на fadeIn() ? Если вам просто нужна задержка, вы можете сделать $(".none").delay(1000).show(1);
Ваше рабочее демо не работает. Ошибка в строке 9 в Chrome.
Мне не понравились решения, предоставленные вам в ответах. Show и Hide имеют необязательный аргумент «options», в котором вы можете предоставить обратный вызов после завершения анимации, например, $ ('. MyElement'). Show ({complete: callBackFunctionToCall}); который может вызвать следующий экземпляр вашей анимации, конечно, он может быть отделен еще лучше, но это лучшее направление.
Где я должен это разместить ?, я не очень хорош со сценариями

Unknown · Accepted Answer · 2014-03-30T10-39-00.000Z

Используйте .delay(), .fadeIn() и .fadeOut(). Попробуй это:

$(document).ready(function(){
            $(".box02").hide();
                $("#select-02").change(function(){
                    $( "select option:selected").each(function(){
                        if($(this).attr("title")=="0b"){
                            $(".box02").delay(600).fadeOut(400);
                            $(".none").delay(600).fadeIn(400);
                        }
                        if($(this).attr("title")=="1b"){
                            $(".box02").delay(600).fadeOut(400);
                            $(".1b").delay(600).fadeIn(400);
                        }
                        if($(this).attr("title")=="2b"){
                            $(".box02").delay(600).fadeOut(400);
                            $(".2b").delay(600).fadeIn(400);
                        }
                    });
                }).change();
            });

DEMO