• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Javascript timers deeper dive questions

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There are two functions that perform timeout operation after a set period of time expires.

They are:
1. SetInterval(expression, milliseconds) repeats and
2. SetTimeout(expression, milliseconds) hit it only once...

Reference link: webpage

I used "expression" here which is usually a variable to a function or a function name like alert with 0 or more params.

My question is how does the timing function work in javascript on various browsers? Since this is an interpreted language,
is there some javascript that is running the timing (i.e. counting down in javascript and then firing a javascript event
behind the scenes???) of these two function before their time expires. And if
the browser is slow will it forget to fire the function or expression when the time is supposed to elapse. Also
how can it ensure that the timer does expire and does an event fire when the timer expires. I've read that the
timer is somehow associated with either the window javascript object or the document javascript object but do
not have enough experience to know for sure.

 
Bartender
Posts: 2968
6
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The setInterval and setTimeout API are not part of the language but part of the runtime environment. Most browsers implement them as do other JavaScript runtime environments like Node.js.
  • Mozilla Developer Network: window.setTimeout
  • timers - Node.js v0.6.1 Manual

  • So as such it is unlikely that either of them are actually based on JavaScript code - they are more likely written in the language the runtime environment was implemented in.

    When writing JavaScript code you have to make allowances for the fact that the JavaScript environment is single-threaded. So a timer event is only going to execute "immediately" when the timer expires if no other JavaScript code is running at the time. Otherwise the event (typically a function object) simply goes into the execution queue and it won't execute until all the other previously queued JavaScript events have finished executing. So when a browser seems to "forget a timer event" it is more than likely that there is a single JavaScript script running that is not releasing the JavaScript thread - so the event is scheduled for execution but never gets a chance to execute.

    Secrets of the JavaScript Ninja - Chapter 8: Taming threads and timers goes into detail about the single threaded nature of JavaScript and how it is best managed with small partitioned units of work that are scheduled with timers. The chapter expands significantly on John Resig: How JavaScript Timers Work.

    Edit: Also be aware that setInterval can have some other implementation specific characteristics, for example:
  • starting with Gecko 5.0 timers on inactive tabs will fire no faster than once per second
  • some implementations will not place another event on the execution queue if an earlier one is still (un-executed) on the queue

  • Depending on the circumstances it may make more sense to have the current event schedule the next event with setTimeout rather than using setInterval - then you can even dynamically adjust the delay if needed.

     
    Marc Noon
    Greenhorn
    Posts: 2
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    Peer Reynders wrote:The setInterval and setTimeout API are not part of the language but part of the runtime environment. Most browsers implement them as do other JavaScript runtime environments like Node.js.
    ...
    Depending on the circumstances it may make more sense to have the current event schedule the next event with setTimeout rather than using setInterval - then you can even dynamically adjust the delay if needed.



    Do these timer functions track its timing based on the internal clock of the clients computer system?
    From one millisecond to the next I've read in several places that the modern browsers in html5 can keep a 1 millisecond resolution between timing events. Older browsers and older computers and operating systems had trouble with keeping even 10 to 50 mili-seconds of resolution.

    So I know its got to be either the internal system clock, or a clock on the browser like IE, Chrome, Safari, Firefox etc..., or a clock on the computer kernel, or a clock on the computer operating system somewhere. I'm assuming the clock is on the browser itself since each browser can have its own implementation of how the clock counts. I may be way off base here.

     
    Peer Reynders
    Bartender
    Posts: 2968
    6
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    Marc Noon wrote:From one millisecond to the next I've read in several places that the modern browsers in html5 can keep a 1 millisecond resolution between timing events.


    Bottom line is that the "resolution capability" is entirely implementation dependent and could be affected by any number of factors including system load. Also keep in mind that even under the best of circumstances because of the single threaded nature of JavaScript the actual execution of the timed event could be delayed indefinitely due to one badly behaved piece of JavaScript code. If your code needs to time/fire something at the 1 ms granularity, the browser JavaScript UI thread isn't the place to do it.
     
    Sheriff
    Posts: 67749
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    In fact, it's quite common for interval "ticks" to be dropped if there is latency or the thread is busy.

    P.S. As Peer mentioned earlier, chapter 8 of my book Secrets of the JavaScript Ninja discusses timers in excruciating detail. (Thanks for the props, Peer.)
     
    Heroic work plunger man. Please allow me to introduce you to this tiny ad:
    a bit of art, as a gift, that will fit in a stocking
    https://gardener-gift.com
    reply
      Bookmark Topic Watch Topic
    • New Topic