0

I have a setInterval function running onload, for the whole time the user is on my site. Basically what it does is progressively scans for differences between window.innerWidth and window.outerWidth (a.k.a. it detects if the user is viewing the site at anything other than 100% zoom), and compensates for it, because I need one fixed object to be center aligned when zoomed out, but left aligned when zoomed in. Now the function is running every 250 ms. What I'm asking is, how does this impact the webpage, if at all?

user1760745
  • 31
  • 3
  • Why not just handle the [`window.onresize`](https://developer.mozilla.org/en-US/docs/DOM/element.onresize) event and forget the timer all together? My unofficial testing seems to indicate that this event is fired when the zoom changes, too. – vcsjones Nov 12 '12 at 00:57
  • I recommend `setTimeout`, instead. `setTimeout(function f () { /* do your thing */ setTimeout( f, 250 ); }, 250 );` – Šime Vidas Nov 12 '12 at 01:00
  • I don't think the OP wants to run the function only once. – Andrew Hubbs Nov 12 '12 at 01:01
  • @AndrewHubbs Look at my code. Inside the function body, I'm setting up the next timeout. – Šime Vidas Nov 12 '12 at 01:02
  • @ŠimeVidas: Why wouldn't you use `setInterval`? This is exactly the kind if thing it is intended for. Also, your sample uses a [named function expression](http://kangax.github.com/nfe/), which should be avoided. – josh3736 Nov 12 '12 at 01:19
  • @josh3736 See [here](http://stackoverflow.com/a/5479821/425275) – Šime Vidas Nov 12 '12 at 01:31
  • The only time to choose `setInterval` over `setTimeout` is in time important areas such as animating a clock tick or some time synchronized animations. – Kernel James Nov 12 '12 at 01:42
  • 1
    @ŠimeVidas: That post is **absolutely incorrect**. With `setInterval`, invocations missed because the execution thread was busy are simply dropped, not queued up. When the event loop runs again, the `setInterval` callback is executed as soon as possible (if overdue), and continues on a normal schedule. In fact, your suggestion to use `setTimeout` is actually counter-productive because it will result in irregular timing that depends on how long your callback takes to execute. [See example here.](http://jsfiddle.net/josh3736/CyVdz/) – josh3736 Nov 12 '12 at 02:16

3 Answers3

3

You should read an article called How JavaScript Timers Work. Basically, all js code runs inside an event loop, and all event handlers are queued, and executed as soon as possible:

In order to understand how the timers work internally there's one important concept that needs to be explored: timer delay is not guaranteed. Since all JavaScript in a browser executes on a single thread asynchronous events (such as mouse clicks and timers) are only run when there's been an opening in the execution.

Timer handlers may even not be executed sometimes; there are cases when a timeout expires twice, but the interpreter only had the chance to run the handler once, discarding the other queued event.

Really, read that article, it's worth it.

bfavaretto
  • 71,580
  • 16
  • 111
  • 150
1

It "shouldn't" have much impact at all if you are only running it every quarter second. I say shouldn't because I don't know exactly what all it is doing to a) decide whether an adjustment is needed and b) making said adjustment.

That said, this sounds like a situation that is made for events rather than polling. Maybe you should look at window.onresize.

Andrew Hubbs
  • 9,338
  • 9
  • 48
  • 71
0

If some of the replies in your other questions answer your question adequately, you should accept them as the modal answer as a courtesy.

Also, your setInterval runs at 250ms intervals. If your function takes longer than 250ms to finish executing, then it may cause them to run continuously right after the other and therefore slow down the user's computer.

A better approach is as given by @ime-vidas which queues your function to run a delay after the previous function has ended.

Community
  • 1
  • 1
Kernel James
  • 3,752
  • 25
  • 32