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

我的第一个解决方案，这个根本不起作用，没有阻止我的用户界面，但没有控制台日志编号为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();

我第二次尝试解决它：这个也不起作用，阻止了用户界面。

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

不阻塞是什么意思？如果您真的想要一个单独的线程，则必须使用某种Web工作者。

如果只想让函数调用后代码继续工作，则可以使用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非阻塞功能

1 个答案: