Небольшая помощь с кодом JavaScript с использованием метода setTimeout()

Я пытаюсь понять две вещи об этом коде:

var updateFn = function(num){
   return function(){
      if(num == 6){
         console.info("100%, all items saved!")
      }
      else{
         var i = num/6;
         var pct = Math.round(100 * i);
         console.info(pct + "% saved");
      }
  };
};

for (var i = 1; i < 7; i++){
   setTimeout(updateFn(i), i * 500);
}

В соответствии с тем, что я прочитал о синтаксисе setTimeout();
```
setTimeout("javascriptstatement",milliseconds);
```
Итак, зачем мне увеличивать миллисекунды каждого цикла до полного времени до 500 * 6 мс? Почему setTimeout(updateFn(i), 500); работает так, как предполагалось?

Почему мне нужно вернуть функцию для функции, переданной в качестве первого параметра SetTimeout?

Почему это не работает?:

var updateFn = function(num){
      if(num == 6){
         console.info("100%, all items saved!")
      }
      else{
         var i = num/6;
         var pct = Math.round(100 * i);
         console.info(pct + "% saved");
      }

};

for (var i = 1; i < 7; i++){
   setTimeout("updateFn(i)", i * 500);
}

Спасибо заранее.

Ответы

Ответ 1

Кажется, он устанавливает 6 тайм-аутов каждые 500 мс. Я думаю, что setInterval может быть лучше.
Вы хотите вернуть функцию, потому что, если вы передаете строку в setTimeout, она получает eval ed, и если вы передаете функцию, она просто запускает ее.

Кажется, что этот код делает индикатор выполнения для операции сохранения, хотя предполагается, что сохранение займет 3 секунды, а увеличение счетчика каждые 1/2 секунды может не быть лучшей идеей.

Во всяком случае, вместо того, чтобы устанавливать 6 тайм-аутов, было бы лучше использовать setInterval.

var updateFn = function(num){
  if(num == 6){
     console.info("100%, all items saved!");
     clearInterval(saving);
  }
  else{
     var i = num/6;
     var pct = Math.round(100 * i);
     console.info(pct + "% saved");
  }
};

var count = 1
var saving = setInterval(function(){
    updateFn(count++);
}, 500);

Ответ 2

setTimeout(updateFn(i), 500); работает как предполагалось, но, вероятно, не так, как вы надеетесь, что он будет работать.

В основном вы создаете 6 тайм-аутов, которые выполняются в одно и то же время (через 500 мс).

Если вы хотите, чтобы они были созданы на расстоянии 500 м друг от друга, тогда setTimeout(updateFn(i), i * 500); - это правильный способ сделать это (или положить setTimeout(updateFn(i), 500); внутри функции updateFn). Если вы хотите, чтобы они происходили каждые 500 мс, вы также могли использовать setInterval.

Ответ 3

Для 1: нет причины (редактирование: нет, есть: он откладывается на выполнение 500 мс за другим. Как заметил кто-то, setInterval - это путь туда), по-видимому: возможно, писателю нужен способ имитации некоторый эффект "замедления" в поддельной функции сохранения.

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

setTimeout(function() {
   console.log("Hello world, 2 sec in the future");
}, 2000)