JavaScript中的异步操作

﹏ヽ暗。殇╰゛Y 2022-09-05 00:12 182阅读 0赞

JavaScript引擎有多个线程，单个脚本只能在主线程运行，其他线程都在后台配合。  
单线程模式虽然对JavaScript构成了很大的限制，但也因此使它具备了其他语言不具备的优势。如果用得好，JavaScript程序是不会出现堵塞的，这就是为什么Node可以用很少的资源，应付大流量访问的原因。

--------------------

### 目录 ###

*  一.定时器
 *   *  setTimeout(JavaScript函数/要执行的代码，等待的毫秒)
     *  clearTimeout(timeoutID)
     *  setInterval(JavaScript函数/要执行的代码，等待的毫秒数)
 *  二.几种模块
 *   *  1.回调函数

# 一.定时器 #

## setTimeout(JavaScript函数/要执行的代码，等待的毫秒) ##

（三秒后会出现一个”ABC“的按钮）

<p id="content"> 请等三秒钟！</p>
    <script type="text/javascript">
    		setTimeout("changeState()",3000)
    		function changeState(){ 
    			var content = document.getElementById('content');
    			content.innerHTML = "<input type='button' value='ABC'>";
    		}
    	</script>

（一个计时器）

x = 0;
    		function countSecond(){ 
    			
    			x = x+1
    			document.getElementById("displayBox").value = x
    			setTimeout("countSecond()",1000)
    		}
    		
    		countSecond()

## clearTimeout(timeoutID) ##

timeoutID为调用setTimeout()函数时所获得的返回值，使用该返回标识夫作为参数，可以取消该 setTimeout() 所设定的定时执行操作  
![在这里插入图片描述][2cf2e1c7bee04654862107c7f368e22b.png]

<input type="text" name="" id="addNum" value="0" size="4"/>
    <input type="button" value="开始" onclick="countNum()"/>
    <input type="button" value="结束" onclick="clearTimeout(matter)"/>
    		
    		x1 = 0;
    		function countNum(){ 
    			document.getElementById('addNum').value = x;
    			x1 += 1
    			matter =setTimeout("countNum()",1000)
    		}

## setInterval(JavaScript函数/要执行的代码，等待的毫秒数) ##

![在这里插入图片描述][67950ae510d64942917498c7d65cc844.png]  
一个时钟

setInterval("myTimer()",1000)
    		function myTimer(){ 
    			var d = new Date();
    			var t = d.toLocaleTimeString();
    			document.getElementById("timer").innerHTML = t;
    		}

# 二.几种模块 #

## 1.回调函数 ##

<table> 
 <thead> 
  <tr> 
   <th>优点</th> 
   <th>缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>简单、容易理解和实现</td> 
   <td>各个部分之间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数</td> 
  </tr> 
 </tbody> 
</table>

function f1(callback){ 
    			callback();
    		}
    		function f2(){ 
    		   console.log("f2222")
    		}
    		f1(f2)

[2cf2e1c7bee04654862107c7f368e22b.png]: /images/20220829/420317a604f744ddb0512cdc92b0db00.png
[67950ae510d64942917498c7d65cc844.png]: /images/20220829/0ff00d4c98d64d989c966e0d873b49a3.png