Что сделать что бы работало?

Question

[Николас Комаров]

Я только учу js и уже час мучаюсь с этим. Нужно что бы был отсчет 4... 3... 2.. 1.. а вместо этого при нажатии кнопки сразу вымигивает цифра 1. В чем проблема.

function kakafka() {
            var a = document.getElementById("out");
            setTimeout(function() { a.innerHTML = "4" }, 2000);
            setTimeout(function() { a.innerHTML = "3" }, 2000);
            setTimeout(function() { a.innerHTML = "2" }, 2000);
            setTimeout(function() { a.innerHTML = "1" }, 2000);
        }

Answer 1

[profesor08]

Все просто. Можно заморочиться с таймаутами и рекурсиями как в примерах выше. А можно сделать логически правильно - интервалом, как в этом примере:

var counter = 4;
var inter = setInterval(function() {
  a.innerHTML = counter--;
  if (!counter) clearInterval(inter);
}, 2000);

Comments

[Николас Комаров]

Спасибо за код но разкажите подробнее о !counter , как я понял когда counter становится 0 то влючается clearinterval

[Павел Волынцев]

Николас Комаров: да, правильно. когда counter==0
!counter => !0, что приводится к логическому типу !false, что равно true

Answer 2

[bitaz]

setTimeout(function() { a.innerHTML = "4" }, 2000);
setTimeout(function() { a.innerHTML = "3" }, 4000);

function kakafka() {
            var a = document.getElementById("out");
            setTimeout(function() { a.innerHTML = "4" }, 2000);
            setTimeout(function() { a.innerHTML = "3" }, 4000);
            setTimeout(function() { a.innerHTML = "2" }, 6000);
            setTimeout(function() { a.innerHTML = "1" }, 8000);
        }

Answer 3

[HoHsi]

Смотрите, JS асинхронный. Это значит, все функции, которые имеют "время простоя" запускаются одновременно (в вашем случае это setTimeout. Это асинхронная функция).
В вашем коде все setTimeout инициализируются и запускаются. А после все через равный промежуток времени (2 с), исполняются.

Если вы пришли из питона или PHP (или другого языка без Event Loop). То там все функции (pause, sleep и т.д) останавливают выполнение кода. В JS же они просто запускаются и продолжается выполнение.

Возможно будет полезно:
javascript.ru/unsorted/async
https://www.google.ru/webhp?sourceid=chrome-instan...