Путаница setInterval с setTimeout в JavaScript - PullRequest
Новая
       9

Путаница setInterval с setTimeout в JavaScript

1 голос
/ 29 октября 2019

Я пытаюсь использовать setInterval с setTimeout в JavaScript. 

var temArr = []

let timer = setInterval(() => {
  var target = Math.random()
  temArr.push(target)
  console.log(6, target, temArr[temArr.length - 1], target === temArr[temArr.length - 1]) // one

  setTimeout(() => {
    console.log(9, target, temArr[temArr.length - 1], target === temArr[temArr.length - 1]) // two
  }, 500);
}, 100)

setTimeout(() => {
  clearInterval(timer)
}, 10000);

Я ожидал, что последнее значение одного и двух будет истинным.

Я ожидал, что каждый раз, когда регистратор печатаети один, и два имеют одинаковое значение третьего параметра, что означает target equals temArr[temArr.length - 1]

Но в результате получается, что один истинен, а два ложен

Но промежуточный результат, равный двум, равен false, а последнее значение равно true, а одно всегда равно true

Когда я переключаю значение тайм-аута, и результат равен true , что означает установить интервалсо значением 500 и временем ожидания со значением 100, в это время оба значения target === temArr[temArr.length - 1] всегда имеют значение true каждый раз, когда регистратор печатает

Не могли бы вы сказать мне, почему?

1 Ответ

2 голосов
/ 29 октября 2019

Они оба вернули истину для меня, просто разный порядок:

ОК setInterval VS setTimeout:

setInterval - будет запускать функцию внутри КАЖДОГО x мс. что означает: 

setInterval(() => {
  console.log('I will run every 100ms')
}, 100)

Будет работать КАЖДЫЕ 100 мс.

setTimeout - запустит функцию внутри ПОСЛЕ x мс. что означает: 

setTimeout(() => {
   console.log('I will run after 10 seconds')
}, 10000);

будет работать ПОСЛЕ 10 секунд.

Таким образом: 

let timer = setInterval(() => {
  console.log('I will run every 500ms';   

  setTimeout(() => {
    cosole.log('I will run AFTER 500ms EVERY 500ms');
  }, 500);
}, 100)

Журнал внутри setTimeout будет работать через 500 мс ПОСЛЕпервый журнал был запущен и будет запускаться каждые 100 мс.

EDIT - Ответ на отредактированный вопрос пользователя:

Для более четких журналов я изменил ваш код:

var temArr = []
var intervalOrder = 0;
var timeoutOrder = 0;

var timer = setInterval(() => {
  var target = Math.random()
  temArr.push(target)
   intervalOrder++

  console.log('ONE - SET TIMEOUT: ', {order: intervalOrder, target, tem: temArr[temArr.length - 1], result: target === temArr[temArr.length - 1]})

  setTimeout(() => {
timeoutOrder++
    console.log('TWO - SET TIMEOUT: ', {order: timeoutOrder, target, tem: temArr[temArr.length - 1], result: target === temArr[temArr.length - 1]}) // two
  }, 500);
}, 100)

setTimeout(() => {
  clearInterval(timer)
}, 1000);

Обратите внимание, что TWO - SET TIMEOUT не получает тот же результат, что и ONE - SET TIMEOUT? Это потому, что он не извлекает значение этой переменной при вызове, а извлекает ON TRIGGER, что означает, что значение уже изменилось, поскольку setInterval имеет более короткое время.

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

var temArr = []
var intervalOrder = 0;
var timeoutOrder = 0;

var logSecond = (target) => {

  setTimeout(() => {
timeoutOrder++
    console.log('TWO - SET TIMEOUT: ', {order: timeoutOrder, target, tem: temArr[temArr.length - 1], result: target === temArr[temArr.length - 1]}) // two
  }, 500);
}

var timer = setInterval(() => {
  var target = Math.random()
  temArr.push(target)
   intervalOrder++

  console.log('ONE - SET TIMEOUT: ', {order: intervalOrder, target, tem: temArr[temArr.length - 1], result: target === temArr[temArr.length - 1]})
logSecond(target)
}, 100)

setTimeout(() => {
  clearInterval(timer)
}, 1000);

^^ в приведенном выше фрагменте, цель и результат теперь одинаковы для обоих журналов.

...