Javascript – how to avoid blocking the browser while doing heavy work?

by

You could nest your calls inside a setTimeout call:

for(...) {
    setTimeout(function(i) {
        return function() { doSomethingHeavy(i); }
    }(i), 0);
}

This queues up calls to doSomethingHeavy for immediate execution, but other JavaScript operations can be wedged in between them.

A better solution is to actually have the browser spawn a new non-blocking process via Web Workers, but that’s HTML5-specific.

EDIT:

Using setTimeout(fn, 0) actually takes much longer than zero milliseconds — Firefox, for example, enforces a minimum 4-millisecond wait time. A better approach might be to use setZeroTimeout, which prefers postMessage for instantaneous, interrupt-able function invocation, but use setTimeout as a fallback for older browsers.

More Related Contents:

  1. Running python on client side
  2. Javascript object literal: what exactly is {a, b, c}?
  3. Include jQuery in the JavaScript Console
  4. Iterate through object properties
  5. Palindrome check in Javascript
  6. Getting the return value of Javascript code in Selenium
  7. Expose jQuery to real Window object with Webpack
  8. How to split comma separated string using JavaScript? [duplicate]
  9. Communicate between scripts in the background context (background script, browser action, page action, options page, etc.)
  10. How to make a shared state between two react components?
  11. Angular 2.1.0 create child component on the fly, dynamically
  12. What is the most efficient way to reverse an array in Javascript?
  13. Concatenate two JSON objects
  14. Why are await and async valid variable names?
  15. How to make Google Chrome JavaScript console persistent?
  16. escaping question mark in regex javascript
  17. Handling optional parameters in javascript
  18. How to make jQuery to not round value returned by .width()?
  19. How do I return the accumulated results of multiple (parallel) asynchronous function calls in a loop?
  20. How to set ChartJS Y axis title?
  21. callback function meaning
  22. Object.getOwnPropertyNames vs Object.keys
  23. When value is assigned to components state, why console.log prints the previous state?
  24. javascript: convert two dimensional array to array of objects using the first ‘row’ to define properties
  25. Force showing the “Save as” dialog box when downloading a file
  26. Adding text to beginning of each array element
  27. Can I remove just the popup bubbles of POI’s in Google Maps API v3?
  28. Handling multiple files from an input element in an array with Google Apps Script
  29. Which types of queues are in event loop?
  30. creating highchart with ajax json data

Leave a Comment