Iterate through a large JavaScript object using setTimeout

Question

Iterate through a large JavaScript object using setTimeout

What is the most efficient way to iterate through large object elements without freezing the browser?

I have successfully looped through arrays using setTimeout/setInterval in this manner:

var i = 0;
var l = arr.length;
var interval = window.setInterval(function(){
   var k = 100; // process 100 items on each Timeout
   var element;
   while(k--) {
      if (i == l) {
          return clearInterval(interval);
      }
      element = arr[i++];
      // ... work here ...
   }
}, 100);

But when dealing with very large objects, what other methods can I use?

Iterating through keys using for(k in arr) will create one large loop that should be avoided.
It's not possible to use .splice() on objects since they are not arrays.

Currently, I resort to creating an array like this

[{k: .., v:...},{k: .., v:...},{k: .., v:...},{k: .., v:...},{k: .., v:...},{k: .., v:...},{k: .., v:...},...]

, but it feels like a wasteful use of space.

javascript arrays loops object

Answer 1

Answer №1

Utilizing Object.keys allows for the same logic to be applied with objects.

let index = 0;
let objKeys = Object.keys( myData );
let length = objKeys.length;
let timer = window.setInterval(function(){
   let limit = 100; // process 100 items on each Timeout
   let item;
   while(limit--) {
      if (index == length) {
          return clearInterval(timer);
      }
      item = myData[ objKeys[index++] ];
      // ... operations here ...
   }
}, 100);

If dealing with millions of keys, it is advisable to seek alternative approaches as looping through such a massive dataset may not be efficient. Consider breaking down the data into batches for processing.

This raises the question: Is there a legitimate need for millions of objects to reside in memory simultaneously? This scenario hints at a potential design flaw that warrants addressing.

Answer 2

Utilizing Object.keys allows for the same logic to be applied with objects.

let index = 0;
let objKeys = Object.keys( myData );
let length = objKeys.length;
let timer = window.setInterval(function(){
   let limit = 100; // process 100 items on each Timeout
   let item;
   while(limit--) {
      if (index == length) {
          return clearInterval(timer);
      }
      item = myData[ objKeys[index++] ];
      // ... operations here ...
   }
}, 100);

If dealing with millions of keys, it is advisable to seek alternative approaches as looping through such a massive dataset may not be efficient. Consider breaking down the data into batches for processing.

This raises the question: Is there a legitimate need for millions of objects to reside in memory simultaneously? This scenario hints at a potential design flaw that warrants addressing.

Iterate through a large JavaScript object using setTimeout

Answer №1

Similar questions

Vue.js numerical input module

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Checking the security status of a PDF file in the web browser to determine if it

Refreshing JSON data every 10 seconds using SVG/D3

Retrieve the data from Mysql database, transform the information inside the link into XML format, and display the final output

In ReactJS, when you encounter TextField values that are "undefined", it is important to handle them appropriately

Extract the <img> element from the Angular model property

Techniques for triggering JavaScript on elements that have been dynamically loaded via Ajax

Remove any objects with nil values from an array using filter and flatMap in Swift 4

Avoid causing the newline character to display

Tips on building a blog using solely index.html, style.css, and script.js files

Changing the data request body in datatables ajax on button click

JavaScript tool: Verify the presence of both jQuery and jQuery UI

Validation check for zip codes that flags errors specifically for certain states

Node.js and JavaScript promises are not pausing for the sequelize query to complete

Is it possible for a Javascript code to execute multiple tasks upon being inserted into the browser's URL bar?

Display and conceal elements based on their data attributes

A guide on managing Ngb Bootstrap carousel slide with a button in Angular

Having trouble with implementing forEach in Google Script

showcase a variety of visualizations using ggplot2 in R by iterating through a for loop and