JS中2種定時器的使用及清除的實現(xiàn)
一、什么是定時器?
定時器就是由JS提供了一些原生方法來實現(xiàn)延時去執(zhí)行某一段代碼。
二、定時器的分類
1、一次性定時器:
setTimeout: 設置一個定時器,在定時器到期后執(zhí)行一次函數(shù)或代碼段
使用方法:var timer=setTimeout(fun,毫秒數(shù))
清除的方法:clearTimeout(timeoutId)
//一次性 var timeoutId = window.setTimeout(fun[, delay, param1, param2, ...]); var timeoutId = window.setTimeout(code[, delay]); //timeoutId: 定時器ID //fun: 延遲后執(zhí)行的函數(shù) //code: 延遲后執(zhí)行的代碼字符串,不推薦使用原理類似eval() //delay: 延遲的時間(單位:毫秒),默認值為0 //param1,param2: 向延遲函數(shù)傳遞而外的參數(shù),IE9以上支持
2、周期性定時器:
setInterval: 以固定的時間間隔重復調(diào)用一個函數(shù)或者代碼段
使用方法:var timer=setInterval(fun,毫秒數(shù))
清除的方法:clearInterval(timer)
//周期性 var intervalId = window.setInterval(fun, delay[, param1, param2, ...]); var intervalId = window.setInterval(code, delay); //intervalId: 重復操作的ID //func: 延遲調(diào)用的函數(shù) //code: 代碼段 //delay: 延遲時間,沒有默認值
三、清除定時器
由于定時器在調(diào)用時,都會返回一個整形的數(shù)字,該數(shù)字代表定時器的序號,即第多少個定時器,所以定時器的清除要借助于這個返回的數(shù)字。
要清除定時器,就必須在用定時器的時候,定義一個變量來記錄定時器的返回值。如下:
//setTimeout 1000ms后執(zhí)行1次 var test1 = setTimeout(function(){ //your codes },1000); //setInterval 每隔1000ms執(zhí)行一次 var test2 = setInterval(function(){ //your codes },1000) //清除Timeout的定時器,傳入變量名(創(chuàng)建Timeout定時器時定義的變量名) clearTimeout(test1); //清除Interval的定時器,傳入變量名(創(chuàng)建Interval定時器時定義的變量名) clearInterval(test2);
注:有時候在寫的時候,還會習慣將清空的定時器的變量置空,這樣寫既可以釋放內(nèi)存,也可以便于后邊代碼的判斷。
到此這篇關于JS中2種定時器的使用及清除的實現(xiàn)的文章就介紹到這了,更多相關JS 定時器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用JavaScript實現(xiàn)一個小程序之99乘法表
這篇文章主要介紹了使用JavaScript實現(xiàn)一個小程序之99乘法表的相關資料,需要的朋友可以參考下2017-09-09一文教你用javascript實現(xiàn)條形碼和二維碼
這篇文章主要為大家介紹了如何用javascript實現(xiàn)條形碼和二維碼示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果,可實現(xiàn)橫向與縱向箭頭的形式標識選中菜單項位置的功能,涉及javascript針對頁面元素位置的判定與樣式動態(tài)操作技巧,需要的朋友可以參考下2015-08-08js根據(jù)手機客戶端瀏覽器類型,判斷跳轉(zhuǎn)官網(wǎng)/手機網(wǎng)站多個實例代碼
這篇文章主要介紹了js根據(jù)手機客戶端瀏覽器類型,判斷跳轉(zhuǎn)官網(wǎng)/手機網(wǎng)站多個實例代碼,需要的朋友可以參考下2016-04-04javascript中innerHTML 獲取或替換html內(nèi)容的實現(xiàn)代碼
這篇文章主要介紹了javascript中innerHTML 獲取或替換html內(nèi)容,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03