Js non-blocking function

Question

Hi i`m new to JS and I am having a problem with this: My task is to convert this blocking function to a non - blocking function, can you help out?

Original code:

setTimeout(() => console.log('Blocked!'), 1000);
    function blocking() {
      let a = 0;
      for (let i = 0; i < 1000; i++) {
        for(let j = 0; j < i * 10000; j++) {
            if (i < j) {
                   a++;
                 }
               }
            }
         }
blocking();

My first solution, this one is not working at all, not blocking my UI but no console logs of the number a:

function function1()
{
    let a=0;
    let i=0;

    console.log("start");
    (function (){
    var condition = true;
        function codeBlock()
        {
            if (condition === true)
            {
                {
                   for(let j = 0; j < i * 10000; j++)
                   {

                       if (i<j)
                       {
                           a++;

                       }
                   }
                }
                console.log(a);
                if (i<1000)
                    i++;
                else
                    condition = false;
                setTimeout(codeBlock,100);
            }
            else
            {
                console.log("done");
            }
        }
    })
}

function1();

My second attempt at solving it: this one isn`t working either, blocking the UI.

let a = 0;

function inner(i)
{
     for(let j = 0; j < i * 10000; j++) {
            if (i < j) {
            a++;
            }
        }
}

function blocking() {
    for (let i = 0; i < 1000; i++) {
        setTimeout(inner, i*50,i);
    }
}

console.log('Starting!')
blocking();
console.log('Done!')

you seem to be concentrating on the wrong part ... .it's the for(let j = 0; j < i * 10000; j++) that's going to be the issue the higher i gets — Bravo
– Bravo, Commented Nov 15, 2018 at 10:38
if that is the actual code (I really don't think it is) then the simplest solution would be to calculate it once, and simply replace the loops with the desired output ;) (see there is absolutely nothing variable in your function) Another thing that might be noticeable, is that i apparently has to be smaller than j so why start from 0 and not from i (there is nothing meaningful happening if the condition is not true) For the rest, except for excessively wrapping async calls, the only thing you can really do is execute it in a worker thread, as js is single threaded — Icepickle
– Icepickle, Commented Nov 15, 2018 at 11:08

Roberto Zvjerković · Accepted Answer · 2018-11-15 10:56:48Z

2

What do you mean by non-blocking? If you really want a separate thread, you will have to use some sort of a web worker.

If you just want to let your code continue working after function call, you could use setTimeouts.

Just wrap the code you want to continue executing after call stack callbacks are resolved. Something like this should work (bit exaggerated):

function nonBlocking() {
  setTimeout(function() {
    let a = 0;
    setTimeout(() => {
      for (let i = 0; i < 1000; i++) {
        setTimeout(() => {
          for (let j = 0; j < i * 1000; j++) {
            if (i < j) {
              a++;
            }
          }
        }, 0);
      }
    }, 0);
  }, 0);
}

I would also recommend you watch this video:

https://www.youtube.com/watch?v=8aGhZQkoFbQ

answered Nov 15, 2018 at 10:56

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bravo Over a year ago

of course, this results in a different value for a at the end, because asynchrony

Collectives™ on Stack Overflow

Js non-blocking function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related