js非阻塞函数

Question

嗨，我是 JS 的新手，我遇到了一个问题：我的任务是将这个阻塞函数转换为非阻塞函数，你能帮忙吗？

原代码：

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();

我的第一个解决方案，这个根本不起作用，没有阻止我的 UI 但没有数字 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();

我第二次尝试解决它：这个也不起作用，阻止了 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!')

Answer 1

非阻塞是什么意思？如果你真的想要一个单独的线程，你将不得不使用某种网络工作者。

如果您只想让您的代码在函数调用后继续工作，您可以使用 setTimeouts。

只需包装您要在调用堆栈回调解析后继续执行的代码。像这样的东西应该可以工作（有点夸张）：

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);
}

我还建议您观看此视频：

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

js非阻塞函数

Js non-blocking function

javascript

function

nonblocking