Пауза выполнения кода на JS как Thread.sleep
 

Привет всем :)

Захотелось написать маленькое меню на JavaScript, но возникла проблема с div-ами, а точнее их заполнением. Я никак не пойму как сделать на JS так, чтобы div объект заполнялся построчно с паузой в 0,2 секунды например... Пробовал setInterval() итп , помещать в линейный код цикла, но не получается никакого эффекта :-E
Начал подумывать уже переложить это на сервер выполнение через Java, но не хочется как-то дизайнерский элемент перекладывать на Tomcat, так как такую задачу хорошо решать на клиенте...
Помогите плз как внедрить паузу в код на JS, чтобы точно работало :-?

Ну почитайте про анимацию.

setInterval/setTimeout запускают код через какое-то время, но не приостанавливают работу скрипта.
Советую проникнуться документацией, благо, её достаточно.

То, что остальной код к сожалению мимо выполняется - это я уже понял :( и меня это не радует, так как не пойму как тогда организовать линейность? Есть ли обходные вещи в таком случае?

проблему вы правильно поняли... мне нужно остановить выполнение кода, а потом продолжить через 0,2 сек например, чтобы получить эффект выезда строк итп... Но вот то, что весь остальной код функции мимо выполняется это очень как-то не удобно для получения нужного эффекта :( и пока я не понял как обойти этот нюанс... помогите понять плз

Я вроде понимаю, но почему-то не получается :(

function driveOut(name)
{
for (index=0; index<5; index++)
{

window.setInterval('_onсlick('+name+','+index+')', 1000);
}
text="";
}

var n;
var text="";
var a=new Array();


function _onclick(name, index)
{
a[0]="<p style='margin-left: 10px;'>A</p>";
a[1]="<p style='margin-left: 10px;'>B</p> ";
a[2]="<p style='margin-left: 10px;'>C</p> ";
a[3]="  <p style='margin-left: 10px;'>D</p>";
a[4]="<p style='margin-left: 10px;'>E‹</p>";

if(n!=null){document.getElementById(n).innerHTML="";}

if(name!=n){

text=text+a[index];
document.getElementById(name).innerHTML=text;


}//end if


n=name;

}

Что я делаю не так? :-?

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

Я их уже прочитал, но не получается почему-то...
Я хочу, чтобы итерация выполнялась с паузой, но почему-то вообще ничего не выполняется?

for (index=0; index<5; index++)
{
window.setInterval('_onсlick('+name+','+index+')', 1000);
}

уже в html самом Id все верно указано... Без интервала работает, но некрасиво получается - просто появляется список и все, а интересно, чтобы он построчно выезжал...

Странно вы читаете.

http://alljs.ru/articles/timeout/overview.html#nosleep

То есть это невозможная задача? :-? Неужели такую вещь как плавное заполнение нужно делать через сервер?

Невозможно сделать так, как вы привыкли. Плавное заполнение сделать можно, но читать вы отказываетесь. Конкретно про анимацию вам во втором посте хорошую ссылку дали.

Более того, я не понимаю, как вы собираетесь делать это на сервере.

На сервере это сделать очень просто ;) элементароно через DOM , но вот плавно заполнить div через JS - это задача хм... честно говоря не понял как с анимацией div связать? Интересно ведь не сама анимация, а DHTML в связке, но если только анимация, то намекните как, потому что я пришел сюда именно потому что не совсем знаю как :)

По ссылке есть пример анимированного посимвольного вывода текста.

Спасибо за совет, но я почему-то не нашел именно про текст. Может по другому как-то называется? Подскажите плз

Приветствую.
нужно реализовать проигрывание одного и того же звука несколько раз,желательно и паузу между ними.
С темой познакомился хорошо,ответа не нашел.
for(i=0;i<3;i++)
{
soundManager.play('mySound2')
}
может еще с паузой можно как-то разобраться,но вот с циклом... ?!
код ведь не останавливается...

Придумал реализацию этого.
Внутри функции создаю цикл:
for(i=0;i<3;i++){
а в цикле ajax-запрос к php, где в php sllep(3)

Пиздец, простите.
Ложь.

Я только осваиваю javascript, поэтому и просил в первых постах - не пинать, а помоч человеку.
Вот пока именно такое решение я нашел и это работает.
Повторю вопрос: нужна пауза в цикле.
Может есть еще какие соображения..

"Мы медленно запрягаем, зато едем - ветер в ушах!!!"

Повторяю ответ: пауза в цикле не нужна.

Вызов чего-либо по временному интервалу в JavaScript осуществляется с помощью интервалов и таймеров(setInterval, setTimeout). Циклы в этом вообще не участвуют.

Читайте статьи по ссылкам в этой теме до полного понимания.

var i = 3; //кол-во повторений;
var interval = setInterval( //задаём интервал
	function(){ //анонимная функция обёртка, вместо неё можно передавать функции по имени
		soundManager.play('mySound2'); //исполняем нужный вам код
		if(--i <= 0) clearInterval( interval ); //если закончилось заданное кол-во повторений - сбрасываем интервал 
	},
	3 * 1000 //время повтора в мс 
)

Приветствую. Ребят, я опять за помощью. :)
function Zazor($)
{
if($==1) clearTimeout(zazor);
else var zazor = setTimeout("alert('Приехали')", 4000);
}

<span onclick="Zazor()">Зеленый</span><br>
<input type="button" value="Останов" onclick="Zazor(1)" />

При клике на "Зеленый" запускается таймер,
при клике на "Останов" таймер не выключается.
Как это поправить?

Вы используете локальную переменную zazor, и естественно, что при каждом выполнении функции она не равна своему предыдущему значению
Используйте либо глобальную переменную, либо используйте замыкание

function Zazor($)
{
if($==1) clearTimeout(zazor);
else var zazor = function(){
setTimeout("alert('Приехали')"}, 4000);
}

так что ли...
не работает.
И странно,что нельзя без всяких условий этосделать и останавливать кнопкой (clearTimeout(zazor)), потому что alert срабатывает сразу же,не дожидаясь 4 сек.

Нет разумеется.
Вы написали синтаксически неверный код, который заведомо не будет выполнятся
Перечитайте еще раз мой ответ
Если замыкания для вас слишком сложны, то используйте более простой вариант, описанный мною до слова "либо"

JSBeginner,
то что вы хотите в цикле сделать НЕЛЬЗЯ итерация цикла проходит за сотые доли секунды и то что вы ставите на setTimeout будет выполнятся в одно и тоже время

function Zazor($)
{
if($==1) clearTimeout(zazor);
else var zazor = function(){// вы создали локальную переменную которую уже нельзя будет остановить вызовом другой функции (другой контекст)
setTimeout("alert('Приехали')"}, 4000);
}

как вам Gvozd уже сказал используются разные переменные, надо так

<script>
var zazor = null;//глобальная переменная которую можно использовать везде
function Zazor($)
{
if($==1) clearTimeout(zazor);
else zazor = setTimeout("alert('Приехали')", 4000);
}
</script>
<span onclick="Zazor()">Зеленый</span><br>
<input type="button" value="Останов" onclick="Zazor(1)" />

Спасибо за пояснения,теперь все работает.
Далее вот это...
var ovec =0;
var zazor;
// Игровые функции
function ivolga(so,put)
{
if(so!=0)
{
clearTimeout(zazor);
ovec++;
if(so != cvet[ovec]){ //проверка совпадения цветов
soundManager.play('mySound5');
return;
}else if(ovec==cvet.length){ //проверка окончания серии
alert('Победа!');
return;
}
soundManager.play('mySound' + so);
return
}
}

// формирование цветов
var cvet = [];
function Start()
{
cvet.length=0;
ovec=0;
for(var i=0;i<2;i++){ // генерируем цвета
cvet.push(getrandom(1,4));
}
}

<span onclick="Start()">Пуск</span>
<br>
<span onclick="ivolga(1)">Желтый</span><br>

Вот вроде все правильно, но почему-то всегда идет ошибка совпадения цветов и "победа" тоже не наступает.. :)

Тут уже разобрался. В функции Start() переменной ovec нужно -1 присваивать, и далее эту же переменную правильно сопоставлять.