I’m working on a Spotify app and can’t get my timer to work right. When I write timer = setInterval(myCallback(), 1000); the function myCallback() only runs one time instead of every second like I want.
Then I changed it to timer = setInterval("myCallback()", 1000); and now it throws Uncaught ReferenceError: myCallback is not defined every second but at least it’s trying to run repeatedly.
What am I doing wrong here? I just want to call a function every second but nothing seems to work properly. Any help would be great!
simple fix - ur calling the function right away instead of passing a reference to it. just drop the () from myCallback so it’s setInterval(myCallback, 1000). that’s all u need, no strings or arrow functions.
You’re reinventing the wheel here. Browser timers are garbage - they get throttled when tabs aren’t active, drift constantly, and break when users switch apps.
I’ve built several music apps and learned this the hard way. You’ll waste tons of time handling edge cases like page visibility changes, mobile backgrounding, and timer drift.
Ditch setInterval and automate it properly. Set up a workflow that handles Spotify API calls, manages timing automatically, and keeps running no matter what users do with their browser.
The workflow polls Spotify’s playback state, syncs with your app data, and triggers updates exactly when needed. No timer headaches or wondering if things actually ran.
I switched after weeks debugging timer issues that mysteriously broke on certain devices. Now everything just works.
You’re calling the function instead of passing it. When you write setInterval(myCallback(), 1000), those parentheses execute the function right away and pass the result to setInterval - that’s why it only runs once. Drop the parentheses: setInterval(myCallback, 1000). This passes the actual function reference. I made this exact mistake building timer features and spent way too long debugging those damn parentheses. The string version can work but it’s bad practice - uses eval under the hood and creates scoping problems, which explains your reference error.
You’re hitting a classic JavaScript gotcha with function execution vs reference. Your first attempt runs myCallback right away and passes whatever it returns (probably undefined) to setInterval. The string version works but creates scope problems since the timer runs globally where myCallback might not exist. Use an anonymous function wrapper instead: timer = setInterval(function() { myCallback(); }, 1000); or go with arrow syntax: timer = setInterval(() => myCallback(), 1000);. This fixes both the scope and timing issues. I’ve run into this exact problem building media players - the wrapper approach always works and keeps things clean.
You’re dealing with function invocation vs function reference. When you write setInterval(myCallback(), 1000), you’re calling myCallback right away and passing its return value to setInterval - that’s why it only runs once. The string approach works but it’s basically using eval, which creates security risks and scope problems. I ran into this same thing building a progress tracker for audio apps. Just pass the function reference directly: timer = setInterval(myCallback, 1000). Need to pass parameters? Wrap it in an arrow function: timer = setInterval(() => myCallback(param), 1000). Don’t forget to call clearInterval(timer) when your component unmounts or the user leaves - otherwise you’ll have memory leaks running in the background.