js定時器

復習

• 函數創建

   function 函數名(){ var total = 10+20; } 

• 調用函數

   函數名(); 函數名(); 

• 參數

   function sum(n,m){//形參 var total = n+m; } sum(100,200); sum(100); //形參未賦值,默認 undefined var a; console.log(a); 

• 返回值

   function sum(n,m){//形參 var total = n+m; // return total; console.log(111); } var t = sum(100,200); console.log(t); 

  • 返回值默認值也是undfined

• arguments

   function sum(){//形參 //arguments [10,20] } sum(10,20); 

• 函數不同形式

   命名函數: function sum(){ } 事件處理函數: ele.onclick = function(){ sum(10,20) } ele.onclick = sum; 對象的方法: var obj = {name:'ujiuye',age:18,eat:function(){ },aa:{x:,y:,}} 

• this關鍵字

   1- 普通函數,this執行window 2- 事件處理函數里面this指向觸發事件的元素 3- 對象方法里面的this,指向調用方法的對象 obj.eat() 

• 作用域: 全局作用域 \ 私有作用域(函數作用域)

• 作用域鏈: 函數中變量查找機制,先從當前作用域查找,如果沒有,依次向上級作用域查找,如果找到全局沒有,報錯

• 兩種變量:全局變量\局部變量(在函數里面var 的和函數的形參)

• 預解析(變量提升):

  • 帶var 先聲明,不賦值(默認值undefined)

     console.log(a);//undefined var a = 10; console.log(a);//10 

  • 帶function 聲明的同時賦值

     sum(); function sum(){} fn();//報錯 var fn = function(){ } fn(); 

• 樣式操作

   設置: ele.style.attr = val; 獲取: ele.style.width 標准: getComputedStyle(ele)[attr] ie: ele.currentStyle[attr] function getCss(ele,attr){ return ele.currentStyle == "unfdefined" ? getComputedStyle(ele)[attr] : ele.currentStyle[attr]; } getCss(oBox,'width'); 

(一) 定時器

1- setTimeout : 等待一段時間執行function,只執行一次

 setTimeout(function(){},1000); 

2- setInterval: 每隔一段時間執行function,重復執行

 setInterval(function(){},1000); 

3- 清除定時器

• clearTimeout()

   var i = 0; var timer = setInterval(function(){ //console.log('***'+timer); i++; if(i == 5){ //clearInterval(1); //清除定時器傳入參數是代表定時器的那個數字 clearInterval(timer); //一般設置定時器時用變量接收一下,清除時傳入變量名 } console.log(i); },1000); 

• clearInterval()

  • 這兩個方法技術上都可以清除兩種定時器,但是為了區分,應該對應起來用

4- 定時器異步

• 定時器時js中的一種異步機制,永遠會在同步代碼之后運行

   setTimeout(function(){ console.log(111); },0) console.log(222); //先輸出222,再輸出111