javaScript基礎入門篇
阿新 • • 發佈：2018-02-24
lose this cti 獲取 scrip 技術分享 consola 基礎 不執行 
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("View Codehaha") 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>
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("View Code打印haha完畢"); 9 callback(); 10 } 11 },100); 12 function callback(){ 13 console.log("打印haha完畢") 14 } 15 </script>
3、apply和call語句
- apply和call功能是一樣的，功能都是：讓函數調用，並且給函數設置this是誰。
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(); //輸出zhangsan 19 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); //輸出zhangsan 30 // showName.apply(obj); //輸出zhangsan 31 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() 和函數節流
- setInterval是設置間隔器；
- setTimeout是設置延時器。
- window.setTimeout(函數,時間);
在指定時間之後，執行函數一次，僅僅執行1次。window可以省略
清除延時器：
- clearTimeout();
1 //setInterval和setTimeout 2 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基礎入門篇