Asynchrounus updating array

Question

is it possible to update an java script array asyncronously? It should look like this:

export const main = async () => {
    let array = []
    const update = async() => {
       //this should update the array every "interval"-seconds              
    }
    update();
    setInterval(update, interval);
    const usage = async() => {
       //this uses the array every n-seconds             
    }
    usage();
    setInterval(usage, n);

the update function calls an async function to fetch data and should replace the old data in the array the array always has the same size

Answer 1

Adding async logic unnecessarily, can cause your functions to actually run slower. Therefore, its important to understand when you should use it.

For example, if you're doing a lot of work on an array (i.e looping over an array of +1000 items, etc) or fetching data from a server, async logic WILL make your code run faster, as the browser can ensure the task is non-blocking. If not, you're best bet is to keep it synchronous.

Note: Javascript cannot run scripts concurrently (at the same time). It is a single-threaded language. To do something that mimics concurrency on the browser, you can look into something called Webworkers API, that is provided by the browser. It allows you to run javascript in a concurrent fashion, by having a script run on another cpu thread, but there are limitations.

However, heavy data pre-processing tasks that need to be done client-side (like modifying large arrays), is where something like Webworkers can be worthwhile.

Recommendation:

Since you are fetching data on update, below is a template for writing this async logic out. I used axios as an example of fetching data, but you can initialize an http request in whatever form you think best.

import axios from "axios"
//will auto update when changed, and value will be exported
let array = []
export {array}
export const main = async () => {
  //this should update the array every "interval"-seconds  
   const update = async(array) => {
      const updated_arr = await axios.get(url)
      //perform async updating logic on updating array with 
      //updated_arr.data.pop(), updated_arr.data.shift(), fetching data, etc.
      
      //assign your updated array back to array, so it updates
      array = updated_arr.data            
   }
  setInterval(update, interval);
}

Answer 2

Move the update() and usage() functions outside your main() function like this:

const update = async(array) => {
    array.push("newValue") 
    return array;
}

const usage = async(array) => {
   return array;          
}

export const main = async () => {
    let array = [];
    const upd_interval = 10;
    const use_interval = 20
    setInterval(await update(array), upd_interval));
    setInterval(await usage(array, use_interval));
}