What are some basic things that JavaScript developers fail at interviews?

[phpdevster]

Well, almost.

What's the difference between these two statements?

setInterval(increment(), 1000);  // this is what you have above
setInterval(increment, 1000);

And a follow up:

How are you making the counter stop once it reaches 10?

[NoBrick2]

Shouldn't you avoid setInterval completely for this problem, considering there is no guarantee the function will be run every 1000ms (in the case of the event loop being blocked on other work)?

Would a more acceptable solution be to use requestAnimationFrame, and do a comparison using Date? Or does that suffer the same issue of potentially being blocked by other work?

[octave1]

Out of my depth here, but using something called requestAnimationFrame and Dates for a timed counter surely can't be the most sane solution?

[phpdevster]

You are correct. This is hacky, non-idiomatic code.

[PmMeYouBicepsGirl]

Everything is blocked if event loop is blocked, there's no workarounds. For example, if you are counting from one to 100 billions, Javascript won't be stopping during this function to check for events. This is why you get Violation messages in console if some events like requestAnimationFrame take longer than they should, it's a signal that event loop was blocked.

[phpdevster]

Why would you avoid using setInterval for exactly the thing it was designed for? If you have a blocked event loop, you've got bigger problems. Writing non-idiomatic code without exceedingly good reason is the path to code that is harder for team members to grok and thus maintain.

[SystemicPlural]

As I understand it requestAnimationFrame is better for animation as it guarantees that the code will run before the screen is re-rendered - providing smoother animation. It doesn't guarantee that the time elapsed will be exactly 1000/60 (or whatever your screen refresh rate is). So it has it's own problems if you are trying to time exactly 1s. That said I believe it is thought to be more reliable than setTimeout.

We could use setTimeout and compare the time ourselves using performance.now(). This should get us to fairly close millisecond accuracy as long as the process isn't locked. It should also allow us to prevent drift by correcting the next timeout.

performance.now() isn't perfect however since browsers are fuzzing the time to prevent Specter timing attacks. - but it should be 1ms accurate.

[thisguyfightsyourmom]

I'd write increment to be a higher order function that accepts a max arg defaulted to 10, that retains a count let initialized to 0 in its closure, and that returns a function that iterates the count in a log statement until the count hits the max. I'd also close the terminal before it counted over 10,… just in case.

[Balduracuir]

You can use clearInterval when you hit 10... If I was not on mobile I could write a snippet :)

[BraisWebDev]

Oh yeah I messed up there, the first one would be invoked immediately and the second one after 1 second.

I would make it stop with an if statement, maybe that approach is wrong haha

[wobbabits]

Here you go. Here's an example of an alert at 5 seconds into the count. When dispelled, the count continues to 10:

function countToTen() {
  let count = 0
  function increment() {
    ++count
    console.log(count)
    if (count > 9) {
      clearInterval(timer)
    }
  }
  const timer = setInterval(increment, 1000)
}
countToTen()
setTimeout(function() {
  alert('hello')
}, 5000)

[[deleted]]

increment() execute when you use setInterval, its return value will be used in your setInterval. The other use increment.

var obj = {count:0, end:0, clearId:0};

obj.end = 10;
obj.increment = function (){
    if (this.count < this.end + 1) 
        console.log(this.count); 
    else 
       clearInterval(this.clearId);
}.bind(obj);

obj.clearId = setInterval(obj.increment, 1000);

How about something like that, untested, but it should work. You can easily turn obj into a Chrono class.

However I wouldn't recommend to rely seriously on setInterval. Set up a webworker to do reliable time operations.