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动画，webWorkers等......

在你的问题的代码示例中，.slideUp()和.slideDown()都是jQuery动画，它们使用计时器在每个计时器刻度上做一点动作。由于这个原因，它们是异步的。

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

你不能真正地让你自己的代码神奇地变成异步，因为Javascript执行线程在Javascript中运行直到完成，然后当它完成时，处理事件队列中的下一个事件。你有时可以模拟＆＃34;后台处理＆＃34;通过在计时器上以小块的形式完成你的工作。这允许其他操作（用户事件处理，其他计时器事件等）与您自己的执行交织，但它需要以完全不同的方式编写代码，以便它可以在计时器上以小块的形式工作，而不是只是连续执行。

以下是一些有用的参考资料：

Best way to iterate over an array without blocking the UI

How does JavaScript handle AJAX responses in the background?

Answer 2

HTML5中引入的

Web Workers使javascript操作异步。

什么是Web Worker？

在HTML页面中执行脚本时，页面无响应   直到脚本完成。

Web worker是一个在后台运行的JavaScript，   独立于其他脚本，而不影响其性能   这页纸。你可以继续做你想做的事：点击，   选择事物等，而web工作人员在后台运行。

Answer 3

Javascript是单线程的。因此，除非您从函数返回，然后在一段时间后返回它，否则您无法真正拥有非阻塞函数。在多线程语言中，您可以使用Thread.sleep(interval)之类的方法执行此操作。在Javascript中，您可以使用setInterval(function, timeoutInMs)或setTimeout(function, timeoutInMs)定期调用您的函数。这是一个演示概念的简单演示：

＆＃13;

    <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>

＆＃13;

如何编写非阻塞javascript方法？

3 个答案: