如何编写非阻塞 javascript 方法？

Question

如果我没记错的话，javascript 回调与非阻塞函数一起使用。（例如从文件读取数据或从服务器获取数据）。

现在是什么使 javascript 函数成为非阻塞的？如果我想写一个非阻塞的 javascript 函数怎么办？定义非阻塞 javascript 函数的主要结构是什么。

在下面的代码中，ready , click , slideUp被用作非阻塞函数。它们是如何变成非阻塞函数的？

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideUp(2000, function(){
            $("p").slideDown(2000);
        });
    });
});

Answer 1

非阻塞函数是设置操作、启动该操作然后使用异步资源管理在后台完成操作的任何函数。浏览器中的异步资源是系统计时器、ajax 调用、CSS 动画、webWorker 等...

在您问题中的代码示例中，.slideUp() 和 .slideDown() 都是 jQuery 动画，它们使用计时器在每个计时器滴答上做一点移动。因此它们是异步的。

您还可以在 webWorker（单独的线程）中执行某些类型的 Javascript 代码。浏览器中的 webWorkers 可以做的事情非常有限（例如，它们根本无法触及 DOM），它们必须从完全独立的脚本中加载，它们不能与您的 main 共享任何变量javascript 并且它们只能通过消息传递方案与主 javascript 通信。但是，您可以使用 webWorkers 在另一个线程中运行某些类型的 Javascript。这是 summary of webWorkers on MDN.

你不能从字面上让你自己的代码神奇地成为异步的，因为 Javascript 执行线程运行s 直到在 Javascript 中完成，然后当它完成时，下一个事件队列中的事件被处理。您有时可以通过在计时器上以小块的形式完成您的工作来模拟 "background processing"。这允许其他操作（用户事件处理、其他计时器事件等）与您自己的执行交织在一起，但它需要以完全不同的方式编写代码，以便它可以在计时器上以小块的方式工作，而不是只是串行执行。

这里有一些有用的参考资料：

Best way to iterate over an array without blocking the UI

How does JavaScript handle AJAX responses in the background?

Answer 2

Web Workers 在 HTML5 中引入，使 javascript 操作异步。

What is a Web Worker?

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Answer 3

Javascript 是单线程的。所以你不能真正拥有一个非阻塞函数，除非你从你的函数中 return 然后在一段时间后返回它。在多线程语言中，你可以用 Thread.sleep(interval) 之类的东西来做到这一点。在 Javascript 中，您可以使用 setInterval(function, timeoutInMs) 或 setTimeout(function, timeoutInMs) 来定期调用您的函数。这是一个演示概念的简单演示：

    <html>
     <head>  
      <style type="text/css">
       #slidingdiv
       {
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
       }
      </style>
     </head>
     <body>
      <div id="slidingdiv">
       Sliding Div
      </div>
      
      <script type="text/javascript">
       var slidingDiv = document.getElementById("slidingdiv");
       var divTop = 0;
       
       function slideDown()
       {
        divTop++;
        slidingDiv.style.top = divTop + "px";
        if(divTop < 150)
        {
         // Move the div down 1px every 50ms until it's 150px from the top
         setTimeout(slideDown, 50);
        }
       }
       
       // Start sliding immediately
       slideDown();   
       
       // Change the text in 2 seconds, while the div is still moving, to show
       // that the slideDown method isn't "blocking"
       setTimeout(function() 
        { 
         slidingDiv.innerHTML = "Text Changed"
        },
        2000
       );
      </script>
     </body>
    </html>

如何编写非阻塞 javascript 方法？

how to write a non blocking javascript method?

javascript

jquery

asynchronous