setTimeout или setInterval?

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

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

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

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

Есть ли разница?

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

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

Timeout:

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

Interval:

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

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

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

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

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

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

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

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

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

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

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

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

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(). Это потому, что он выполняется только один раз при достижении указанного интервала.

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);

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

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

myTimeoutFunction();

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

Сама разница в их целях.

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.

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

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

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

Ваш код будет иметь разные интервалы выполнения, и в некоторых проектах, например в онлайн-играх, это неприемлемо. Во-первых, что вы должны сделать, чтобы ваш код работал с одинаковыми интервалами, вы должны изменить 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 мсек, и результат будет стабильным.

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

Очевидно, разница в том, что setTimeout вызывает метод один раз, setInterval вызывает его многократно.

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

Я провел простой тест 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
    });
}

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

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

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

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

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

Вы можете проверить ответ 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);
});

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

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

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

Если вы установите слишком короткий интервал в setInterval, он может сработать до завершения предыдущего вызова функции. Я столкнулся с этой проблемой в недавнем браузере (Firefox 78). Это привело к тому, что сборщик мусора не смог достаточно быстро освободить память и создал огромную утечку памяти. Использование setTimeout(function, 500); дало сборке мусора достаточно времени, чтобы очистить и сохранить стабильность памяти с течением времени.

Серг Хосподарец упомянул проблему в своем ответе, и я полностью согласен с его замечаниями, но он не включил проблему утечки памяти / сбора мусора. Я тоже испытал некоторое зависание, но использование памяти мгновенно увеличилось до 4 ГБ для выполнения какой-то незначительной задачи, что было для меня настоящим обломом. Таким образом, я думаю, что этот ответ по-прежнему полезен для других в моей ситуации. Я бы поставил это в комментарии, но у меня нет репутации для этого. Надеюсь, ты не против.

Кажется, что вариант A и вариант B работают одинаково, в основном из-за мест, где расположены функции setInterval и setTimeout.

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

myTimeoutFunction();

Это рекурсивная функция, и если doStuff очень сложный, setTimeout должен отслеживать все вызовы setTimout плюс текущий doStuff, что делает его медленнее и медленнее .

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);