How to make non-blocking javascript code?

by

To make your loop non-blocking, you must break it into sections and allow the JS event processing loop to consume user events before carrying on to the next section.

The easiest way to achieve this is to do a certain amount of work, and then use setTimeout(..., 0) to queue the next chunk of work. Crucially, that queueing allows the JS event loop to process any events that have been queued in the meantime before going on to the next piece of work:

function yieldingLoop(count, chunksize, callback, finished) {
    var i = 0;
    (function chunk() {
        var end = Math.min(i + chunksize, count);
        for ( ; i < end; ++i) {
            callback.call(null, i);
        }
        if (i < count) {
            setTimeout(chunk, 0);
        } else {
            finished.call(null);
        }
    })();
}

with usage:

yieldingLoop(1000000, 1000, function(i) {
    // use i here
}, function() {
    // loop done here
});

See http://jsfiddle.net/alnitak/x3bwjjo6/ for a demo where the callback function just sets a variable to the current iteration count, and a separate setTimeout based loop polls the current value of that variable and updates the page with its value.

More Related Contents:

  1. How to return value from an asynchronous callback function? [duplicate]
  2. Callback after all asynchronous forEach callbacks are completed
  3. I know that callback function runs asynchronously, but why?
  4. How should I call 3 functions in order to execute them one after the other?
  5. How to “await” for a callback to return?
  6. nodeJs callbacks simple example
  7. How can I take advantage of callback functions for asynchronous XMLHttpRequest?
  8. Waiting on multiple asynchronous calls to complete before continuing
  9. Converting a recursive function into an asynchronous CPS implementation (javascript)
  10. Asynchronous Script Loading Callback
  11. Does an async function always need to be called with await?
  12. javascript: execute a bunch of asynchronous method with one callback
  13. Load javascript async, then check DOM loaded before executing callback
  14. Why is setState in reactjs Async instead of Sync?
  15. Pass an extra argument to a callback function
  16. How do I chain three asynchronous calls using jQuery promises?
  17. Execute write on doc: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
  18. JavaScript, Node.js: is Array.forEach asynchronous?
  19. How does Asynchronous Javascript Execution happen? and when not to use return statement?
  20. Node JS Promise.all and forEach
  21. How to write asynchronous functions for Node.js
  22. JavaScript setTimeout() won’t wait to Execute? [duplicate]
  23. node.js async/await using with MySQL
  24. understanding the concept of javascript callbacks with node.js, especially in loops
  25. jQuery – Can threads/asynchronous be done?
  26. Executing async code on update of state with react-hooks
  27. Use Async/Await with Axios in React.js
  28. Javascript – if with asynchronous case
  29. Wait for image to be loaded before going on
  30. Node.js: When to use Promises vs Callbacks

Leave a Comment