setTimeout czy setInterval?

O ile wiem, te dwa elementy javascript zachowują się w ten sam sposób:

Opcja A:

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

myTimeoutFunction();

Opcja B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

Czy jest jakaś różnica między użyciem setTimeout i setInterval ?

Zasadniczo próbują zrobić to samo, ale setIntervalpodejście będzie dokładniejsze niż setTimeoutpodejście, ponieważ setTimeoutczeka 1000 ms, uruchamia funkcję, a następnie ustawia inny limit czasu. Tak więc okres oczekiwania wynosi w rzeczywistości nieco ponad 1000 ms (lub o wiele więcej, jeśli wykonanie funkcji zajmuje dużo czasu).

Chociaż można by pomyśleć, że setIntervalbędzie wykonywany dokładnie co 1000 ms, należy zauważyć, że setIntervalrównież się opóźni, ponieważ JavaScript nie jest językiem wielowątkowym, co oznacza, że ​​- jeśli działają inne części skryptu - interwał będzie miał czekać, aż to się skończy.

W tym skrzypce wyraźnie widać, że limit czasu się opóźnia, podczas gdy interwał jest prawie cały czas przy prawie 1 wywołaniu na sekundę (co skrypt próbuje zrobić). Jeśli zmienisz zmienną prędkości u góry na coś małego, na przykład 20 (co oznacza, że ​​będzie próbowała działać 50 razy na sekundę), przedział nigdy nie osiągnie średnio 50 iteracji na sekundę.

Opóźnienie jest prawie zawsze nieistotne, ale jeśli programujesz coś naprawdę precyzyjnego, powinieneś wybrać samoregulujący się licznik czasu (który w zasadzie jest licznikiem czasu, który stale dostosowuje się do tworzonego opóźnienia)

Czy jest jakaś różnica?

Tak. Limit czasu jest wykonywany przez określony czas po wywołaniu setTimeout (); Interwał wykonuje określony czas po wystrzeleniu poprzedniego interwału.

Zauważysz różnicę, jeśli wykonanie funkcji doStuff () zajmie trochę czasu. Na przykład, jeśli reprezentujemy wywołanie setTimeout / setInterval za pomocą ., uruchomienie limitu czasu / interwału *i wykonanie kodu JavaScript za pomocą [-----], linie czasu wyglądają następująco:

Timeout:

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

Interval:

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

Następną komplikacją jest sytuacja, gdy interwał jest uruchamiany, gdy JavaScript jest już zajęty robieniem czegoś (np. Obsługą poprzedniego interwału). W takim przypadku interwał zostanie zapamiętany i nastąpi natychmiast po zakończeniu poprzedniej procedury obsługi i zwróceniu kontroli do przeglądarki. Na przykład dla procesu doStuff (), który jest czasami krótki ([-]), a czasem długi ([-----]):

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

• reprezentuje odpalanie interwału, które nie mogło od razu wykonać swojego kodu, a zamiast tego zostało oczekujące.

Interwały próbują więc „nadrobić zaległości”, aby wrócić do harmonogramu. Ale nie ustawiają się w kolejce jeden po drugim: na interwał może być tylko jedno wykonanie. (Gdyby wszystkie stały w kolejce, przeglądarka miałaby ciągle powiększającą się listę zaległych wykonań!)

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

x oznacza odpalenie interwału, które nie mogło zostać wykonane lub być w toku, dlatego zostało odrzucone.

Jeśli funkcja doStuff () zwykle trwa dłużej niż ustawiony dla niej interwał, przeglądarka zje 100% procesora próbującego ją obsłużyć i może stać się mniej wrażliwa.

Z którego korzystasz i dlaczego?

Chained-Timeout zapewnia przeglądarce wolne miejsce w wolnym czasie; Interwał stara się zapewnić, aby działająca funkcja była wykonywana jak najbliżej zaplanowanych godzin, kosztem dostępności interfejsu użytkownika przeglądarki.

Zastanawiałbym się, czy interwał jednorazowych animacji powinien być jak najbardziej płynny, podczas gdy przerwy w łańcuchach są bardziej grzeczne w przypadku trwających animacji, które miałyby miejsce przez cały czas podczas ładowania strony. W przypadku mniej wymagających zastosowań (takich jak trywialne odpalanie aktualizacji co 30 sekund lub coś w tym rodzaju) możesz bezpiecznie użyć jednego z nich.

Pod względem zgodności z przeglądarkami setTimeout poprzedza setInterval, ale wszystkie przeglądarki, które spotkasz dzisiaj, obsługują oba. Ostatnim maruderem od wielu lat była IE Mobile w WinMo <6,5, ale mam nadzieję, że to też jest już za nami.

setInterval ()

setInterval()jest metodą wykonania kodu opartą na interwałach czasowych, która ma natywną zdolność do wielokrotnego uruchamiania określonego skryptu po osiągnięciu tego interwału. To powinno nie być zagnieżdżone w jego funkcji zwrotnej przez autora skryptu, aby to pętla, ponieważ pętle domyślnie . Będzie strzelał z przerwą, chyba że zadzwonisz clearInterval().

Jeśli chcesz zapętlić kod animacji lub zaznaczyć takt zegara, użyj setInterval().

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

setTimeout ()

setTimeout()to metoda wykonania kodu oparta na czasie, która wykona skrypt tylko jeden raz, gdy zostanie osiągnięty interwał. Będzie nie powtórzyć jeszcze raz, jeśli nie dostosować go do pętli skryptu przez zagnieżdżanie się setTimeout()wewnątrz obiektu funkcji wywołuje uruchomić. Jeśli jest nastawiony na pętlę, będzie strzelał z przerwą, chyba że zadzwonisz clearTimeout().

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

Jeśli chcesz, aby coś się wydarzyło po upływie określonego czasu, użyj setTimeout(). Wynika to z tego, że wykonuje się tylko jeden raz po osiągnięciu określonego przedziału czasu.

SetInterval ułatwia anulowanie przyszłego wykonania kodu. Jeśli używasz setTimeout, musisz śledzić identyfikator timera na wypadek, gdybyś chciał go później anulować.

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

myTimeoutFunction();

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

przeciw

function myTimeoutFunction()
{
    doStuff();
}

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

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

Uważam, że setTimeoutmetoda jest łatwiejsza w użyciu, jeśli chcesz anulować limit czasu:

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

myTimeoutFunction();

Ponadto, jeśli coś pójdzie nie tak w funkcji, przestanie się powtarzać przy pierwszym błędzie, zamiast powtarzać błąd co sekundę.

Różnica tkwi w ich celach.

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

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

To takie proste

Więcej szczegółowych informacji tutaj http://javascript.info/tutorial/settimeout-setinterval

Kiedy uruchomisz jakąś funkcję w setInterval, która działa dłużej niż limit czasu-> przeglądarka utknie.

- Np. DoStuff () zajmuje 1500 sekund. wykonać, a ty zrobisz: setInterval (doStuff, 1000);
1) Uruchom przeglądarkę doStuff (), co zajmuje 1,5 sekundy. być straconym;
2) Po ~ 1 sekundzie próbuje ponownie uruchomić doStuff () . Ale poprzednia funkcja doStuff () jest nadal wykonywana-> więc przeglądarka dodaje to uruchomienie do kolejki (uruchamiane po wykonaniu pierwszej).
3,4, ..) To samo dodawanie do kolejki wykonywania dla następnych iteracji, ale doStuff () z poprzednich jest nadal w toku ...
W rezultacie przeglądarka utknęła.

Aby temu zapobiec, najlepszym sposobem jest uruchomienie setTimeout wewnątrz setTimeout w celu emulacji setInterval .
Aby skorygować limity czasu między wywołaniami setTimeout, można użyć samokorekty jako alternatywy dla techniki setInterval JavaScript .

Używam setTimeout.

Najwyraźniej różnica polega na tym, że setTimeout wywołuje metodę raz, setInterval wywołuje ją wielokrotnie.

Oto dobry artykuł wyjaśniający różnicę: Samouczek: liczniki JavaScript z setTimeout i setInterval

Twój kod będzie miał różne przedziały czasowe wykonywania, a w niektórych projektach, takich jak gry online, jest to niedopuszczalne. Po pierwsze, co należy zrobić, aby kod działał z tymi samymi przedziałami, należy zmienić „myTimeoutFunction” na:

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

Po tej zmianie będzie ona równa

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

Ale nadal nie będziesz mieć stabilnego wyniku, ponieważ JS jest jednowątkowy. Na razie, jeśli wątek JS będzie zajęty czymś, nie będzie mógł wykonać funkcji wywołania zwrotnego, a wykonanie zostanie odroczone o 2-3 ms. Czy masz 60 egzekucji na sekundę i za każdym razem, gdy masz losowe opóźnienie 1-3 sekund, będzie to absolutnie niedopuszczalne (po jednej minucie będzie to około 7200 ms) i mogę doradzić, aby użyć czegoś takiego:

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

Ten kod gwarantuje stabilny okres realizacji. Nawet wątek będzie zajęty, a Twój kod zostanie wykonany po 1005 ms, następnym razem będzie miał limit czasu na 995 ms, a wynik będzie stabilny.

Zrobiłem prosty test setInterval(func, milisec) , ponieważ byłem ciekawy, co się dzieje, gdy zużycie czasu funkcji jest większe niż czas interwału.

setIntervalbędzie ogólnie zaplanować następną iterację tuż po starcie poprzedniej iteracji, chyba że funkcja ta jest nadal w toku . Jeśli tak, setIntervalzaczeka, aż funkcja się skończy. Jak tylko to się stanie, funkcja jest natychmiast ponownie uruchamiana - nie trzeba czekać na następną iterację zgodnie z harmonogramem (tak jak byłoby w warunkach bez funkcji przekroczenia czasu). Nie ma również sytuacji z uruchomionymi równoległymi iteracjami.

Przetestowałem to na Chrome v23. Mam nadzieję, że jest to deterministyczne wdrożenie we wszystkich nowoczesnych przeglądarkach.

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

Dane wyjściowe konsoli:

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

Ta waitfunkcja jest tylko pomocnikiem do blokowania wątków - synchroniczne wywołanie ajax, które zajmuje dokładnie 2500 milisekund przetwarzania po stronie serwera:

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

Aby spojrzeć na to trochę inaczej: setInterval zapewnia, że ​​kod jest uruchamiany w każdym podanym przedziale czasu (tj. 1000 ms lub ile określasz), podczas gdy setTimeout ustawia czas, w którym „czeka” do uruchomienia kodu. A ponieważ uruchomienie kodu zajmuje dodatkowe milisekundy, sumuje się do 1000 ms, a zatem setTimeout uruchamia się ponownie w niedokładnych czasach (ponad 1000 ms).

Na przykład liczniki czasu / odliczanie nie są wykonywane za pomocą setTimeout, są one wykonywane za pomocą setInterval, aby upewnić się, że nie opóźnia się, a kod działa dokładnie w danym interwale.

Zarówno setInterval, jak i setTimeout zwracają identyfikator timera, którego można użyć do anulowania wykonania, to znaczy przed uruchomieniem limitów czasu. Aby anulować, zadzwoń do clearInterval lub clearTimeout w następujący sposób:

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

Ponadto limity czasu są automatycznie anulowane po opuszczeniu strony lub zamknięciu okna przeglądarki.

Możesz samodzielnie sprawdzić poprawność odpowiedzi bobince po uruchomieniu następującego javascript lub sprawdzeniu tego 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);
});

Cóż, setTimeout jest lepszy w jednej sytuacji, jak właśnie się dowiedziałem. Zawsze używam setInterval, który pozostawiłem w tle na ponad pół godziny. Kiedy wróciłem do tej zakładki, pokaz slajdów (na którym użyto kodu) zmieniał się bardzo szybko, zamiast co 5 sekund, które powinien mieć. W rzeczywistości zdarza się to ponownie, gdy testuję go bardziej i czy to wina przeglądarki, czy nie, nie jest to ważne, ponieważ dzięki setTimeout sytuacja jest całkowicie niemożliwa.

Różnica jest widoczna w konsoli:

Po prostu dodając do tego, co już zostało powiedziane, ale wersja kodu setTimeout osiągnie również ten, Maximum call stack sizektóry zatrzyma jego działanie. Ponieważ nie ma podstawowego przypadku, w którym funkcja rekurencyjna mogłaby się zatrzymać, więc nie można jej uruchamiać na zawsze.

Najbardziej ogólna różnica między i setInterval (wyrażenie, czas trwania) jest taka

setTimeout () wykona wyrażenie tylko RAZ i po upływie określonego czasu.

Jednak,

setInterval () wykona wyrażenie w INFINITE-LOOP po każdym określonym czasie trwania.

Myślę SetIntervali SetTimeoutsą inne. SetIntervalwykonuje blok zgodnie z ustawionym czasem, SetTimeoutwykonuje blok kodu raz.

Wypróbuj następujący zestaw kodów po upływie sekund odliczania limitu czasu:

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

a następnie spróbuj

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

Różnice możesz zobaczyć dla siebie.