javascript setInterval, как это работает в деталях - PullRequest
Новая
       5

javascript setInterval, как это работает в деталях

0 голосов
/ 19 октября 2018

Я написал этот код, и он меня удивляет.

Я не понимаю, почему функция вызывается, но выполняет только первые 2 строки, затем setInterval ждет 1 секунду и выполняет оператор return.

Пожалуйста, кто-нибудь объяснит мне:) 

let div = document.getElementById("div1");
const updateTime = () => {
  let seconds = 0;
  if (seconds === 0) div.textContent = `0 sekund`;
  return () => {
    seconds++;
    div.textContent = `${seconds} sekund`;
  }
}
setInterval(updateTime(), 1000);
<div id="div1"></div>

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Функция updateTime запускается при ее вызове, то есть когда вы набираете updateTime().

Все это выполняется.

Часть после ключевого слова returnэто синтаксис, который определяет другую функцию .Он не запускается сразу, потому что вы ничего не сделали для его вызова.

Эта другая функция возвращается.

Вы передаете эту функцию в setInterval, который вызывает ее каждую секунду..

0 голосов
/ 19 октября 2018

Вы немедленно выполняете updateTime (), она выполняет первые две строки, а затем также сразу же возвращает функцию, которая запускается в первый раз спустя 1 секунду, а затем каждую секунду после этого

Пожалуйста, прочитайте комментарии, которые янаписал в коде: 

let div = document.getElementById("div1");
const updateTime = () => {
  // next two lines executed by updateTime() immediately
  let seconds = 0; // these are remembered because you create a closure
  if (seconds === 0) div.textContent = `0 sekund`;

  // NOW the following function is returned and will be what is 
  // executed for the rest of the life of the setInterval
  // The first time this returned function is called is in one second from now
  return () => { // this creates a closure. It is a good way to handle vars
    seconds++; // this is known only to the function 
    div.textContent = `${seconds} sekund`;
  }
}
setInterval(
  updateTime(), // execute this IMMEDIATELY 
  1000 // execute whatever is returned from updateTime in intervals of 1 seconds 
 ); 
<div id="div1"></div>
...