首頁 > 開發者 > JavaScript
標籤：type log for lap 傻傻 window app nts ons
1、同步和非同步
同步：程式從上到下的執行，通俗的說for迴圈很耗費時間，但是程式就是傻等，傻傻的等待10個haha輸出，然後輸出3，比如媽媽去接兒子的飛機，需要等很長時間，等待的時候就是傻等，不同時做別的事情。
非同步：通俗的講就是遇見了一個特別耗費時間的事情，程式不會傻等，而是先執行後面的語句。比如媽媽去接兒子的飛機，需要等很長時間，但是媽媽同時逛逛商店什麼的，不是傻等。
1 <script> 2 同步 3 console.log(1); 4 console.log(2); 5 for(i=1;i<=10;i++){ 6 console.log("haha") 7 } 8 console.log(3); 9 10 非同步11 console.log(1);12 console.log(2);13 var count = 0;14 var timer=setInterval(function(){15 console.log("haha");16 count++;17 18 if(count==10){19 clearInterval(timer);20 } 21 },100);22 console.log(3);23 </script>View Code
2、回呼函數
1 <script> 2 var count = 0; 3 var timer = setInterval(function(){ 4 console.log("haha"); 5 count++ 6 if(count == 10){ 7 clearInterval(timer); 8 // console.log("列印haha完畢"); 9 callback();10 }11 },100);12 function callback(){13 console.log("列印haha完畢")14 }15 </script>View Code
3、apply和call語句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script>10 // var obj={11 // "name":"zhangsan",12 // "age":20,13 // "sayName":function(){14 // console.log(this.name);15 // }16 // }17 18 // obj.sayName(); //輸出zhangsan19 20 // function showName(){21 // console.log(this.name);22 // }23 // showName();//什麼也沒有24 // showName(obj); //什麼也沒有25 26 27 // call 和 apply作用: 28 // 1.執行函數 2.把函數內部的this指向改變29 // showName.call(obj); //輸出zhangsan30 // showName.apply(obj); //輸出zhangsan31 32 //區別：33 var obj = {34 "name" : "zhangsan"35 }36 function sum(a,b,c){37 console.log(a+b+c);38 console.log(this.name);39 }40 sum(1,2,3);41 // 傳參時 call直接逗號隔開 apply要用數組把參數包起來42 sum.call(obj,1,2,3);43 sum.apply(obj,[1,2,3]);44 45 46 </script>47 48 </body>49 </html>View Code
4、setTimeout()和setInterval() 和函數節流
在指定時間之後，執行函數一次，僅僅執行1次。window可以省略
清除延時器：
1 //setInterval和setTimeout2 setInterval(function(){3 console.log(Math.random());4 },1000);每間隔一秒輸出一個隨機數，可以一直輸出5 6 setTimeout(function(){7 console.log(Math.random());8 },1000);延遲1秒輸出一個隨機數，只可以輸出一次View Code
函數節流：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="點我"> <script>//函數節流 ，如果不使用節流點擊按鈕會點一下輸出一個隨機數 使用節流後點擊按鈕將不起作用 會自動按照設定的時間間隔輸出 var btn = document.getElementsByTagName(‘input‘)[0];//擷取按鈕 var lock = true; btn.onclick = function(){ if(!lock) return; //如果lock=false，就直接返回，下面的不執行 console.log(Math.random()); lock = false; setTimeout(function(){ lock = true; }, 1000); } </script></body></html>View Code
javaScript基礎入門篇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
