VPF::сделать паузу - Форум программистов

Leshak

Дата 22.12.2011, 15:51 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Изучаю вопрос - как сделать паузу в действиях скрипта
delay - работает для анимации jQuery
setTimeout - для всего остального JS, Но не там, где цикл...

Ничего не понимаю smile

Код


<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>тест delay</title>
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>    
    <style> 
        body {
            font:15px/1.5 arial,helvetica,clean,sans-serif; 
        }    
        
        .z {
            font:15px/0.9 arial,helvetica,clean,sans-serif; 
            color: #444444;
            background-color: #dddddd;
            height: 14px;
            width: 111px;
            margin: 7px;
            cursor: pointer;
            border: solid 1px #555555;            
            padding-left: 22px;    padding-right: 11px; 
            padding-top: 3px;    padding-bottom: 3px;
            
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px; 
        }

        #pause{
            background-color: #eeeeee;
        }        
        
    </style>    
</head>
<body >    
    <input id="pause" class="z" value="1111"/>
    <div id="test1" class="z"><b>test delay</b></div>
    <div id="test2" class="z"><b>test setTimeout</b></div>
<script>


    $('#test1').live('click', function(){
        var pause = $('#pause').attr('value');
        $('body').append('<br> Test delay['+pause+']: ');
        for(var i=0; i<5; i++ ){
            $('body').delay(pause).append(' .'+i);
        }
    });

    $('#test2').live('click', function(){
        var pause = $('#pause').attr('value');
        $('body').append('<br> Test setTimeout['+pause+']: ');
        for(var i=0; i<5; i++ ){
            window.setTimeout(function(){ $('body').append(' .'+i); }, pause)
        }
    });
    

</script>
</body>
</html>

Посмотрите! Разъясните! Пожалуйста!

$дмитрий

Дата 22.12.2011, 18:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 5
Всего: 45

Если нужно циклом, логичнее использовать setInterval

Приведу еще способы:
- через метод animate, там есть параметр
- через ajax
- через алерт smile

Leshak

Дата 22.12.2011, 19:19 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

setInterval
здесь не подходит по начальному условию...
надо сделать некоторое действие определенное количество раз с определенным интервалом
без дополнительного участия пользователя, и минимальной загрузкой процессора...
потому как запустить процедуру сравнивающую время ее запуска с текущим в ожидании заказанной разницы не Кузяво... :(

$дмитрий

Дата 22.12.2011, 20:47 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 5
Всего: 45

Цитата

надо сделать некоторое действие определенное количество раз с определенным интервалом

setInterval удовлетворяет этим условиям

Цитата

процедуру сравнивающую время ее запуска с текущим в ожидании заказанной разницы не Кузяво

Не понятна формулировка предложения

Leshak

Дата 23.12.2011, 08:49 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Цитата($дмитрий @ 22.12.2011, 20:47

)

Цитата

>>>надо сделать некоторое действие определенное количество раз с определенным интервалом

setInterval удовлетворяет этим условиям

увы - но нет

setInterval

Цитата

window.setInterval("{Выражение}"|{Функция}, {Интервал}[, "{Язык}"]);

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

Второй параметр задает само это время в миллисекундах.

Третий необязательный параметр задает скриптовый язык, на котором написано выражение или функция.

Метод возвращает целочисленный идентификатор вновь созданного интервального таймера.

z-END

Дата 23.12.2011, 09:39 (ссылка)

(нет голосов)

Загрузка ...

прафесар™

Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 1
Всего: 102

наверно тяжело, когда незнаешь чего хочешь.

Цитата(Leshak @ 22.12.2011, 20:19

)

надо сделать некоторое действие определенное количество раз с определенным интервалом

итак
1. создаем переменную action_count=5;
2. создаем функцию:

Код


function delayed_loop(){
  action_count--;
  console.log('running again...');
  if (action_count>0) 
   setTimeout(delayed_loop,1000);
}

3. запускаем delayed_loop

Это сообщение отредактировал(а) z-END - 23.12.2011, 09:40

--------------------

Каждый чилавек пасвоему праф...а памоему НЕТ!

Leshak

Дата 23.12.2011, 15:19 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Цитата(z-END @ 23.12.2011, 09:39

)

наверно тяжело, когда незнаешь чего хочешь.

Тяжело когда забываешь что есть Рекурсия!!! и она работает!!
Спасибо

Код



<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>тест delay</title>
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>    
    <style> 
        body {
            font:15px/1.5 arial,helvetica,clean,sans-serif; 
        }    
        
        .z {
            font:15px/0.9 arial,helvetica,clean,sans-serif; 
            color: #444444;
            background-color: #dddddd;
            height: 14px;
            width: 141px;
            margin: 7px;
            cursor: pointer;
            border: solid 1px #555555;            
            padding-left: 22px;    padding-right: 11px; 
            padding-top: 3px;    padding-bottom: 3px;
            
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px; 
        }

        #pause{
            background-color: #eeeeee;
        }        
        
    </style>    
</head>
<body >    
    <input id="pause" class="z" value="1111"/>
    <div id="test1" class="z"><b>test delay</b></div>
    <div id="test2" class="z"><b>test setTimeout</b></div>
    <div id="test3" class="z"><b>test delayed_loop</b></div>
<script>

var action_count = 5 ;

function delayed_loop(pause){
  action_count--;
  // console.log('running again...');
  $('body').append(' .'+action_count);
  if (action_count>0) 
   setTimeout(delayed_loop,pause);
}

    $('#test1').live('click', function(){
        var pause = $('#pause').attr('value');
        $('body').append('<br> Test delay['+pause+']: ');
        for(var i=0; i<5; i++ ){
            $('body').delay(pause).append(' .'+i);
        }
    });

    $('#test2').live('click', function(){
        var pause = $('#pause').attr('value');
        $('body').append('<br> Test setTimeout['+pause+']: ');
        for(var i=0; i<5; i++ ){
            window.setTimeout(function(){ $('body').append(' .'+i); }, pause)
        }
    });
    
    $('#test3').live('click', function(){
        var pause = $('#pause').attr('value');
        action_count = 5;
        $('body').append('<br> Test delayed_loop['+pause+']: ');
        delayed_loop(pause);
    });
    

</script>
</body>
</html>

а если попробовать - Блин!!!!! Опять!!! Да что же это за .....(пип)....
но ведь это же не цикл??? и почему промежутки разные???

упс....

Это сообщение отредактировал(а) Leshak - 23.12.2011, 15:28

ksnk

Дата 23.12.2011, 15:38 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


$('#test3').live('click', function(){
        var pause = $('#pause').attr('value');
        $('body').append('<br>Just for fun ['+pause+']: ');
        for(var i=0; i<5; i++ ){ 
            setTimeout(function(){$('body').append(' .');},pause*(1+i));
        }
    });

Правда предать цыкловое значение I в функцию будет довольно мозголомным трюком smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Leshak

Дата 23.12.2011, 15:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

ВСЕ было правильно!
РЕКУРСИЯ!!! токо она спасет!

Просто надо было Аккуратно все вызывать и передавать smile

Это работает

Код



<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>тест delay</title>
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>    
    <style> 
        body {
            font:15px/1.5 arial,helvetica,clean,sans-serif; 
        }    
        
        .z {
            font:15px/0.9 arial,helvetica,clean,sans-serif; 
            color: #444444;
            background-color: #dddddd;
            height: 14px;
            width: 141px;
            margin: 7px;
            cursor: pointer;
            border: solid 1px #555555;            
            padding-left: 22px;    padding-right: 11px; 
            padding-top: 3px;    padding-bottom: 3px;
            
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px; 
        }

        #pause{
            background-color: #eeeeee;
        }        
        
    </style>    
</head>
<body >    
    <input id="pause" class="z" value="1111"/>
    <div id="test1" class="z"><b>test delay</b></div>
    <div id="test2" class="z"><b>test setTimeout</b></div>
    <div id="test3" class="z"><b>test delayed_loop</b></div>
<script>

var action_count = 5 ;

    function delayed_loop(pause){
        action_count--;
        $('body').append(' .'+action_count+' ('+pause+')');
        if (action_count>0) {
             setTimeout(function(){delayed_loop(pause)},pause);
        };
    }

    $('#test1').live('click', function(){
        var pause = $('#pause').attr('value');
        $('body').append('<br> Test delay['+pause+']: ');
        for(var i=0; i<5; i++ ){
            $('body').delay(pause).append(' .'+i);
        }
    });

    $('#test2').live('click', function(){
        var pause = $('#pause').attr('value');
        $('body').append('<br> Test setTimeout['+pause+']: ');
        for(var i=0; i<5; i++ ){
            window.setTimeout(function(){ $('body').append(' .'+i); }, pause)
        }
    });
    
    $('#test3').live('click', function(){
        var pause = $('#pause').attr('value');
        action_count = 5;
        $('body').append('<br> Test delayed_loop['+pause+']: ');
        delayed_loop(pause);
    });
    

</script>
</body>
</html>

Absinthe

Дата 24.12.2011, 18:05 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 526
Регистрация: 4.5.2011

Репутация: нет
Всего: 11

Цитата

Правда предать цыкловое значение I в функцию будет довольно мозголомным трюком

Элементарным.
(function(i){ текущий блок })(i);

ksnk

Дата 24.12.2011, 18:38 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Absinthe, Мозголомно бывает объяснить ПОЧЕМУ именно так работает smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »