You need to clear your interval, useEffect(() => { const intervalId = setInterval(() => { //assign interval to a variable to clear it. setState(state => ({ data: state.data, error: false, loading: true })) fetch(url) .then(data => data.json()) .then(obj => Object.keys(obj).map(key => { let newData = obj[key] newData.key = key return newData }) ) .then(newData => … Read more
They essentially try to do the same thing, but the setInterval approach will be more accurate than the setTimeout approach, since setTimeout waits 1000ms, runs the function and then sets another timeout. So the wait period is actually a bit more than 1000ms (or a lot more if your function takes a long time to … Read more
See Working Demo on jsFiddle: http://jsfiddle.net/qHL8Z/3/ $(function() { var timer = null, interval = 1000, value = 0; $(“#start”).click(function() { if (timer !== null) return; timer = setInterval(function() { $(“#input”).val(++value); }, interval); }); $(“#stop”).click(function() { clearInterval(timer); timer = null }); }); <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <input type=”number” id=”input” /> <input id=”stop” type=”button” value=”stop” /> <input id=”start” type=”button” … Read more
You can use a mutation observer. It’s quite widely supported nowadays. var e = document.getElementById(‘test’) var observer = new MutationObserver(function (event) { console.log(event) }) observer.observe(e, { attributes: true, attributeFilter: [‘class’], childList: false, characterData: false }) setTimeout(function () { e.className=”hello” }, 1000) <div id=”test”> </div>
I think I may have figured out a solution. I figured, if you can measure it you can compensate for it, right? http://jsfiddle.net/zryNf/9/ var start; var nextAt; var f = function() { if (!start) { start = new Date().getTime(); nextAt = start; } nextAt += 1000; var drift = (new Date().getTime() – start) % 1000; … Read more
var list = [1, 2, 3, 4, 5]; for (var i = 0, len = list.length; i < len; i += 1) { (function(i) { setInterval(function() { list[i] += 10; console.log(i + “=>” + list[i] + “\n”); }, 5000) })(i); } Here is the working code: var list = [1, 2, 3, 4, 5]; for … Read more
you can add interval to your component’s state and can clear it whenever you want. componentDidMount(){ const intervalId = setInterval(this.yourFunction, 1000) this.setState({ intervalId }) } componentWillUnmount(){ clearInterval(this.state.intervalId) }
Use a counter which increments each time the callback gets executed, and when it reaches your desired number of executions, use clearInterval() to kill the timer: var counter = 0; var i = setInterval(function(){ // do your thing counter++; if(counter === 10) { clearInterval(i); } }, 200);
Immediately inside setInterval, place a check to see if the document is focused. The interval will continue firing as usual, but the code inside will only execute if the document is focused. If the window is blurred and later refocused, the interval will have continued keeping time but document.hasFocus() was false during that time, so … Read more
A lot of other answers are focusing on a pattern that does work, but their explanations aren’t really very thorough as to why your current code doesn’t work. Your code, for reference: function funcName() { alert(“test”); } var func = funcName(); var run = setInterval(“func”,10000) Let’s break this up into chunks. Your function funcName is … Read more