技術標籤：javascriptjs

Javascript計時器的用法

當我們學習前端的時候定時器是一個重要的知識點，幾乎現在的我們開啟一個網頁中的頁面都會看見定時器的身影，京東淘寶的定時秒，輪播圖、規定時間的介面跳轉…

在JavaScript中給我們提供了兩種定時器setTimeout（）和setInterval()

一、setTimeout（）定時器

語法：window.setTimeout(呼叫函式，[延遲的毫秒數)；

setTimeout()方法：在指定的毫秒數後執行呼叫函式
注意：
1、因為setTimeout方法是屬於window物件的所以我們在呼叫的時候可以不用寫window可以直接寫setTimeout(呼叫函式，[延遲的毫秒數)；

  （1）setTimeout(function(){
      console.log('時間到了');
   }
  （2）setTimeout(function(){
      console.log('時間到了');
    }，0)
    
這兩個的定時器的意義是一樣的 

3、呼叫的函式可以直接寫函式、可以寫函式名、還有字串的寫法’函式名()’

(1)直接寫函式

  setTimeout(function(){
      console.log('時間到了');
    }，1000)

(2)寫函式名

		首先定義一個函式
			function alarm（）
				{console.log('時間到了');}
			setTimeout（alarm，1000）；
	當一秒過後觸發alarm函
 

（3）字串的寫法’函式名()’

		首先定義一個函式
			function alarm（）
				{console.log('時間到了');}
			setTimeout（'alarm()'，1000）；
		當一秒過後觸發alarm函式

4、當我們頁面存在多個定時器的時候，我們經常要給定時器加識別符號,防止定時器在計數的時候出現混亂

	  Var time1 = setTimeout(function(){
	      console.log('時間到了');
	    }，1000)
	    
	  Var time2 = setTimeout(function(){
	      console.log('時間到了');
	    }，1000);
 

二、setInterval（）定時器

語法：window.setInterval(呼叫函式，[延遲的毫秒數)；

setInterval()方法：在指定的毫秒數後執行呼叫函式
注意：
1、因為setTimeout方法是屬於window物件的所以我們在呼叫的時候可以不用寫window可以直接寫setInterval(呼叫函式，[延遲的毫秒數)；
2、延遲的時間單位是毫秒，但是可以省略，如果神略則預設的是0，立即執行

  （1）setInterval(function(){
      console.log('時間到了');
   }
  （2）setInterval(function(){
      console.log('時間到了');
    }，0)
    
這兩個的定時器的意義是一樣的 

3、呼叫的函式可以直接寫函式、可以寫函式名、還有字串的寫法’函式名()’

(1)直接寫函式

 setInterval(function(){
      console.log('時間到了');
    }，1000)

(2)寫函式名

		首先定義一個函式
			function alarm（）
				{console.log('時間到了');}
			setInterval（alarm，1000）；
	每隔一秒過後觸發alarm函

（3）字串的寫法’函式名()’

		首先定義一個函式
			function alarm（）
				{console.log('時間到了');}
			setInterval（'alarm()'，1000）；
		每隔一秒過後觸發alarm函式

4、當我們頁面存在多個定時器的時候，我們經常要給定時器加識別符號,防止定時器在計數的時候出現混亂

	  Var time1 = setInterval(function(){
	      console.log('時間到了');
	    }，1000)
	    
	  Var time2 = setInterval(function(){
	      console.log('時間到了');
	    }，1000);

三、兩者的區別

1、window.setTimeout（）函式 定時時間到了，就去呼叫這個函式，只調用一次，當函式呼叫完成後就結束了這個定時器
2、window.setInterval();函式 每隔這個定時的時間，就去掉用這個函式，會多次呼叫重複呼叫這個函式

四、清除定時器

有時候我們會讓定時器去除這時候我們應該怎麼去除掉定時器呢？

(1)清除window.setTimeout()定時器用window.clearTimeout（定時器的識別符號）

 Var time1 = setTimeout(function(){
	      console.log('時間到了');
	    }，1000)
	    
clearTimeout(time1);

(2)清除window.setInterval()定時器用window.clearInterval（定時器的識別符號）

	Var time1 = setInterval(function(){
	      console.log('時間到了');
	    }，1000)
	    
	clearInterval(time1);