setTimeout или setInterval?

Question

Насколько я могу судить, эти две части javascript ведут себя одинаково:

Вариант А:

function myTimeoutFunction()
{
    doStuff();
    setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

Вариант В:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

Есть ли какая-то разница между использованием Время установки и Установочный интервал?

Answer 1

Они, по сути, пытаются сделать то же самое, но setInterval подход будет более точным, чем setTimeout подход, поскольку setTimeout ожидает 1000 мс, запускает функцию, а затем устанавливает еще один тайм-аут.Таким образом, период ожидания на самом деле составляет немного больше 1000 мс (или намного больше, если выполнение вашей функции занимает много времени).

Хотя кто-то может подумать, что setInterval выполнит именно так каждые 1000 мс важно отмечать, что setInterval также будет задержка, поскольку JavaScript не является многопоточным языком, а это означает, что - если выполняются другие части скрипта - интервалу придется подождать его завершения.

В эта Скрипка, вы можете ясно видеть, что тайм-аут будет отставать, в то время как интервал почти все время составляет почти 1 вызов в секунду (что пытается сделать скрипт).Если вы измените переменную speed вверху на что-то маленькое, например 20 (это означает, что она будет пытаться выполняться 50 раз в секунду), интервал никогда не достигнет в среднем 50 итераций в секунду.

Задержка почти всегда незначительна, но если вы программируете что-то действительно точное, вам следует самонастраивающийся таймер (который по сути является таймером на основе таймаута, который постоянно настраивается на созданную им задержку)

Answer 2

Есть ли какая-то разница?

ДА.Тайм-аут выполняется через определенное время после вызова setTimeout();интервал выполняется через определенное количество времени после срабатывания предыдущего интервала.

Вы заметите разницу, если выполнение вашей функции doStuff() займет некоторое время.Например, если мы представляем вызов setTimeout/setInterval с ., срабатывание тайм - аута / интервала с * и выполнение кода JavaScript с [-----], временные рамки выглядят следующим образом:

Timeout:

.    *  .    *  .    *  .    *  .
     [--]    [--]    [--]    [--]

Interval:

.    *    *    *    *    *    *
     [--] [--] [--] [--] [--] [--]

Следующая сложность заключается в том, что интервал срабатывает, в то время как JavaScript уже занят чем-то (например, обработкой предыдущего интервала).В этом случае интервал запоминается и происходит, как только предыдущий обработчик завершает работу и возвращает управление браузеру.Так, например, для процесса doStuff(), который иногда бывает коротким ([-]), а иногда длинным ([-----]):

.    *    *    •    *    •    *    *
     [-]  [-----][-][-----][-][-]  [-]

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

Поэтому интервалы старайтесь ‘наверстать упущенное’, чтобы вернуться к графику.Но они не выстраиваются друг на друга в очередь:за каждый интервал может быть только одно ожидающее выполнения.(Если бы все они встали в очередь, браузер остался бы с постоянно расширяющимся списком невыполненных операций!)

.    *    •    •    x    •    •    x
     [------][------][------][------]

x представляет собой запуск с интервалом, который не удалось выполнить или который был отложен, поэтому вместо этого был отброшен.

Если выполнение вашей функции doStuff() обычно занимает больше времени, чем установленный для нее интервал, браузер будет потреблять 100% процессора, пытаясь ее обслуживать, и может стать менее отзывчивым.

Что вы используете и почему?

Chained-Тайм-аут дает браузеру гарантированный промежуток свободного времени;Interval пытается гарантировать, что выполняемая им функция выполняется как можно ближе к запланированному времени, за счет доступности пользовательского интерфейса браузера.

Я бы рассмотрел интервал для одноразовых анимаций, который я хотел бы сделать как можно более плавным, в то время как прикованные тайм-ауты более корректны для текущих анимаций, которые будут выполняться все время, пока загружается страница.Для менее требовательных применений (таких как тривиальный запуск обновления каждые 30 секунд или что-то в этом роде) вы можете безопасно использовать любой из них.

С точки зрения совместимости с браузерами, setTimeout предшествует setInterval, но все браузеры, с которыми вы встретитесь сегодня, поддерживают оба.Последним отставшим на протяжении многих лет был IE Mobile в WinMo <6.5, но, надеюсь, это тоже теперь позади нас.

Answer 3

setInterval() Установить интервал()

setInterval() это метод выполнения кода на основе временных интервалов, который имеет встроенную возможность многократного запуска указанного скрипта при достижении заданного интервала.Это должно не быть вложенным в его функцию обратного вызова автором сценария, чтобы сделать ее циклической, поскольку она циклы по умолчанию.Он будет продолжать срабатывать с заданным интервалом, если вы не вызовете clearInterval().

Если вы хотите зацикливать код для анимации или при тикании часов, то используйте setInterval().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);

setTimeout() Настройка времени()

setTimeout() это метод выполнения кода, основанный на времени, который будет выполнять только скрипт один раз когда интервал будет достигнут.Это будет не повторите еще раз, если только вы не настроите его на цикл выполнения скрипта путем вложения setTimeout() объект внутри функции, которую он вызывает для запуска.Если он настроен на цикл, он будет продолжать срабатывать с заданным интервалом, пока вы не вызовете clearTimeout().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);

Если вы хотите, чтобы что-то произошло один раз по истечении определенного периода времени, то используйте setTimeout().Это связано с тем, что он выполняется только один раз при достижении указанного интервала.

Answer 4

setInterval упрощает отмену будущего выполнения вашего кода.Если вы используете setTimeout, вы должны отслеживать идентификатор таймера на случай, если захотите отменить его позже.

var timerId = null;
function myTimeoutFunction()
{
    doStuff();
    timerId = setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

// later on...
clearTimeout(timerId);

против

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
var timerId = setInterval(myTimeoutFunction, 1000);

// later on...
clearInterval(timerId);

Answer 5

Я нахожу, что setTimeout метод проще в использовании, если вы хотите отменить тайм-аут:

function myTimeoutFunction() {
   doStuff();
   if (stillrunning) {
      setTimeout(myTimeoutFunction, 1000);
   }
}

myTimeoutFunction();

Кроме того, если что-то пойдет не так в функции, она просто перестанет повторяться при первой ошибке, вместо того чтобы повторять ошибку каждую секунду.

Answer 6

Сама разница заключается в их целях.

setInterval()
   -> executes a function, over and over again, at specified time intervals  

setTimeout()
   -> executes a function, once, after waiting a specified number of milliseconds

Все очень просто, вот так

Более подробные детали здесь http://javascript.info/tutorial/settimeout-setinterval

Answer 7

Когда вы запускаете какую-либо функцию внутри setInterval, которая работает больше времени, чем тайм-аут-> браузер зависает.

- Например., доСтафф() занимает 1500 секунд.быть казненным, и вы делаете: setInterval(количество ячеек, 1000);
1) Запуск браузера доСтафф() что занимает 1,5 секунды.подлежащий исполнению;
2) Через ~ 1 секунду он пытается запустить доСтафф() снова.Но предыдущий доСтафф() все еще выполняется-> поэтому браузер добавляет этот запуск в очередь (для запуска после завершения первого).
3,4,..) То же самое добавление в очередь выполнения для следующих итераций, но доСтафф() из предыдущих все еще находятся в процессе разработки...
Как результат - браузер зависает.

Чтобы предотвратить такое поведение, лучший способ - запустить setTimeout внутри setTimeout для эмуляции setInterval.
Чтобы исправить тайм-ауты между вызовами setTimeout, вы можете использовать самокорректирующаяся альтернатива setInterval в JavaScript техника.

Answer 8

Я использую setTimeout.

По-видимому, разница в том, что setTimeout вызывает метод один раз, setInterval вызывает его повторно.

Вот хорошая статья, объясняющая разницу: Учебник:Таймеры JavaScript с setTimeout и setInterval

Answer 9

Я провел простой тест setInterval(func, milisec), потому что мне было любопытно, что происходит, когда потребление времени функцией превышает длительность интервала.

setInterval будет в целом запланируйте следующую итерацию сразу после начать предыдущей итерации, если только функция все еще не выполняется.Если это так, setInterval будет ждать, пока функция не завершится.Как только это происходит, функция немедленно запускается снова - нет ожидания следующей итерации по расписанию (как это было бы в условиях без функции с превышением времени).Также нет ситуации с запуском параллельных итераций.

Я тестировал это на Chrome v23.Я надеюсь, что это детерминированная реализация во всех современных браузерах.

window.setInterval(function(start) {
    console.log('fired: ' + (new Date().getTime() - start));
    wait();
  }, 1000, new Date().getTime());

Консольный вывод:

fired: 1000    + ~2500 ajax call -.
fired: 3522    <------------------'
fired: 6032
fired: 8540
fired: 11048

В wait функция - это просто помощник по блокировке потоков - синхронный вызов ajax, который выполняет ровно 2500 миллисекунд обработки на стороне сервера:

function wait() {
    $.ajax({
        url: "...",
        async: false
    });
}

Answer 10

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

function myTimeoutFunction()
{
    setTimeout(myTimeoutFunction, 1000);
    doStuff();
}
myTimeoutFunction()

После этого изменения оно будет равно

function myTimeoutFunction()
{
    doStuff();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

Но вы все равно получите нестабильный результат, потому что JS является однопоточным.На данный момент, если поток JS будет чем-то занят, он не сможет выполнить вашу функцию обратного вызова, и выполнение будет отложено на 2-3 мс.У вас 60 выполнений в секунду, и каждый раз, когда у вас случайная задержка в 1-3 секунды, это будет абсолютно неприемлемо (через одну минуту это будет задержка около 7200 мс), и я могу посоветовать использовать что-то вроде этого:

    function Timer(clb, timeout) {
        this.clb = clb;
        this.timeout = timeout;
        this.stopTimeout = null;
        this.precision = -1;
    }

    Timer.prototype.start = function() {
        var me = this;
        var now = new Date();
        if(me.precision === -1) {
            me.precision = now.getTime();
        }
        me.stopTimeout = setTimeout(function(){
            me.start()
        }, me.precision - now.getTime() + me.timeout);
        me.precision += me.timeout;
        me.clb();
    };

    Timer.prototype.stop = function() {
        clearTimeout(this.stopTimeout);
        this.precision = -1;
    };

    function myTimeoutFunction()
    {
        doStuff();
    }

    var timer = new Timer(myTimeoutFunction, 1000);
    timer.start();

Этот код гарантирует стабильный период выполнения.Даже поток будет занят, и ваш код будет выполнен через 1005 мс, в следующий раз у него будет тайм-аут на 995 мс, и результат будет стабильным.

Answer 11

Взглянуть на это немного по-другому:setInterval гарантирует, что код выполняется через каждый заданный интервал (т.е.1000 мс, или сколько вы укажете), в то время как setTimeout устанавливает время, в течение которого он "ожидает" выполнения кода.И поскольку для запуска кода требуются дополнительные миллисекунды, это увеличивает время до 1000 мс, и, таким образом, setTimeout выполняется снова в неточное время (более 1000 мс).

Например, таймеры / обратный отсчет выполняются не с помощью setTimeout, а с помощью setInterval, чтобы гарантировать, что он не задерживается и код выполняется с точно заданным интервалом.

Answer 12

И setInterval, и setTimeout возвращают идентификатор таймера, который вы можете использовать для отмены выполнения, то есть до срабатывания тайм-аутов.Чтобы отменить, вы вызываете либо clearInterval, либо clearTimeout следующим образом:

var timeoutId = setTimeout(someFunction, 1000);
clearTimeout(timeoutId);
var intervalId = setInterval(someFunction, 1000),
clearInterval(intervalId);

Кроме того, тайм-ауты автоматически отменяются, когда вы покидаете страницу или закрываете окно браузера.

Answer 13

Что ж, setTimeout лучше в одной ситуации, как я только что узнал.Я всегда использую setInterval, который я оставил для запуска в фоновом режиме более чем на полчаса.Когда я снова переключился на эту вкладку, слайд-шоу (в котором использовался код) менялось очень быстро, а не каждые 5 секунд, как должно было быть.На самом деле это происходит снова, когда я тестирую его еще раз, и неважно, виноват браузер или нет, потому что с setTimeout такая ситуация совершенно невозможна.

Answer 14

Вы можете проверить ответ bobince самостоятельно при запуске следующего javascript или проверить это JSFiddle ( Ошибка )

<div id="timeout"></div>
<div id="interval"></div>

var timeout = 0;
var interval = 0;

function doTimeout(){
    $('#timeout').html(timeout);
    timeout++;
    setTimeout(doTimeout, 1);
}

function doInterval(){
    $('#interval').html(interval);
    interval++;
}

$(function(){
    doTimeout();
    doInterval();
    setInterval(doInterval, 1);
});

Answer 15

Разница очевидна в консоли:

Answer 16

Просто добавляю к тому, что уже было сказано, но версия кода setTimeout также достигнет Maximum call stack size что остановит его функционирование.Поскольку нет базового варианта для рекурсивной функции, на котором можно было бы остановиться, поэтому вы не можете ее запустить навсегда.

Answer 17

Я думаю, что SetInterval и SetTimeout они разные. SetInterval выполняет блок в соответствии с установленным временем, пока, SetTimeout выполняет блок кода один раз.

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

setInterval(function(e){
    alert('Ugbana Kelvin');
}, 2000);

а потом попробуй

setTimeout(function(e){
    alert('Ugbana Kelvin');
}, 2000);

Вы можете сами увидеть различия.