Back

Technologies:

javascriptjavascript
jqueryjquery
avatar
Tolerim
24 days ago

The requests in Ajax + jQuery code begin to spam after a few seconds.

My goal is to execute multiple timers while having a dynamic list of items. The current code I have is as follows:

var itemList = Array(...);

for(var i in itemList){
    setInterval(function(){
        itemList[i] += 10;
        console.log(i + "=>" + itemList[i] + "\n");
    }, 5 * 1000);
}
The issue with this code is that it only updates the final item in the list multiplied by the total number of items. I am seeking a solution with an explanation behind it to prevent this from happening.

Answers(2)
avatar
Vogi
23 days ago
Verified Answer
To execute multiple timers in JavaScript, you can use the setInterval() method. This method takes a function argument that will run an infinite number of times with a given millisecond delay as the second argument. In your code, you can use the setInterval() method to execute the block of code that should execute multiple times. Here's an example: 
var itemList = Array(...);

for(var i in itemList){
    setInterval(function(){
        itemList[i] += 10;
        console.log(i + "=>" + itemList[i] + "\n");
    }, 5 * 1000);
}
The issue with this code is that it only updates the final item in the list multiplied by the total number of items. To prevent this from happening, you can use a closure to capture the value of i at each iteration of the loop. Here's an example: 
var itemList = Array(...);

for(var i in itemList){
    (function(i){
        setInterval(function(){
            itemList[i] += 10;
            console.log(i + "=>" + itemList[i] + "\n");
        }, 5 * 1000);
    })(i);
}
I hope this helps! Let me know if you have any other questions.

Sources

Timers in Node.js | Node.jsJavaScript timer - javatpointsetinterval - How to run multiple timer functions, one after the other ...Run multiple tasks Concurrently (in parallel) using JavaScriptjavascript - Multiple countdown timers on one page - Stack Overflow
avatar
Tolerim
24 days ago
The issue with the provided code is that the setInterval function is using a closure to access the value of x which is changing in every iteration of the for loop. To solve this problem, we can wrap the setInterval function inside another function that takes x as an argument to create a new scope for each iteration of the loop. Here's an example of how we can refactor the code: 
var list = [ /* ... */ ];

function startTimer(x) {
  setInterval(function() {
    list[x] += 10;
    console.log(x + "=>" + list[x]);
  }, 5 * 1000);
}

for(var x in list) {
  startTimer(x);
}
In this updated code, we have created a new function startTimer that takes x as an argument and calls setInterval inside its own scope. Then we can simply call this function inside the loop to start a new timer for each item in the list. By doing this, we avoid the closure issue and ensure that each timer operates independently on its corresponding item in the list.
;