Asked  7 Months ago    Answers:  5   Viewed   42 times

What is the main difference between

setInterval

and

setTimeout

in JavaScript?

 Answers

43

setTimeout(expression, timeout); runs the code/function once after the timeout.

setInterval(expression, timeout); runs the code/function repeatedly, with the length of the timeout between each repeat.

Example:

var intervalID = setInterval(alert, 1000); // Will alert every second.
// clearInterval(intervalID); // Will clear the timer.

setTimeout(alert, 1000); // Will alert once, after a second.
Tuesday, June 1, 2021
 
relyt
answered 7 Months ago
93

Returns a value which can be used to cancel the timer. So, it would seem unlikely that they return the same value (unless they are reusing values and one of the timers has already been cancelled)

Mozilla states it's DOM level 0, but not part of the specification. (look at the bottom of the page)

I've got an even better reference:

Nabble says:

SetTimeout and setInterval are from the original Javascript specification, pre-ECMA. That specification is not officially standardized anywhere, but it is supported by all web browsers and most implementations of the Javascript language. (Including ActionScript.)

The pre-ECMA specs are often known as the "DOM-0" APIs. Since they have never been standardized before, it makes sense for HTML5 to finally spec the non-deprecated APIs in an attempt to provide a consistent environment across browsers. Especially when recent events have proven that there are companies who like to implement the letter of the standard, but not the spirit.

Read the original spec here, or from Sun (who was an early endorser of JavaScript).

Thursday, June 3, 2021
 
RemiX
answered 7 Months ago
27

They're functionally about the same, but there are differences. One difference is in how browsers handle it if doSomething takes longer than the interval. With setInterval, at least some browsers will just skip the next interval if doSomething is still running. So if you use 100ms as you have, and doSomething takes 110 ms to run, the next run won't happen until 90ms later (of course, all of these times are approximate).

Another difference is that with the setTimeout, you'll get a new handle every time, whereas with setInterval you get one handle.

Another difference with your examples as given is that in the setTimeout example, you're firing up a JavaScript parser/compiler every time, whereas with setInterval you're only firing up the parser/compiler once. But this difference shouldn't matter, because you shouldn't be doing that at all — see below.

But subtleties aside, what you have there is functionally the same.


Side note: It's not best practice to pass strings into either setTimeout or setInterval. Instead, pass in a function reference:

// setTimeout
function myFunction(){
   setTimeout(myFunction, 100);
   doSomething();
}
setTimeout(myFunction, 100);

// setInterval
function myFunction(){
   doSomething();
}
setInterval(myFunction, 100);

Passing in a string fires up a JavaScript parser and does the same thing as eval. It should be avoided whenever possible (and it's almost always possible).

Thursday, August 26, 2021
 
Rafal
answered 4 Months ago
69

I was able to fix this issue by making browser sleep for few seconds after every change in URL.

Below is the code snippet:

67 it('should create new job listing', function () {
68        //Login As Admin To Access Vacancies Feature
69        loginAsManager();
.
.        //load manager's dashboard list page
.        dashboardPage = new DashboardPage();
.        dashboardPage.vacanciesTab.click();
.
.        //load vacancies list page
.        var vacanciesUrl = browser.baseUrl + '#/vacancies';
.        browser.sleep(2000);
.        expect(browser.getCurrentUrl()).toEqual(vacanciesUrl);
.        vacanciesPage = new VacanciesPage();
.        vacanciesPage.addVacancyButton.click();
.
.

I don't think this is a neat solution to this problem.

I will be happy to hear, if someone has a better solution to this.

Cheers Gaurav

Friday, October 15, 2021
 
Morrison Chang
answered 2 Months ago
94

Maybe a dependency error. I'll suggest you to use a better practice for such lib.

  1. Put the fullcalendar scripts into vendor/assets/javascripts

  2. Require this script manually in application.js before the tree and after jquery and any other lib it depends.

    /=require 'fullcalendar`
    

Add

Check the loaded Javascript files in header, if application.js is the last, you have dependency error. The lib must be there before calling it.

Thursday, November 11, 2021
 
Yuriy Faktorovich
answered 4 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share