首頁 > web前端 > js教程 > 主體

JavaScript中setInterval的使用詳解

黄舟
發布: 2017-11-24 09:57:03
原創
2349 人瀏覽過

相信很多大夥都知道JavaScript中setInterval的作用是在播放動畫的時,每隔一定時間就調用函數,方法或對象,也有很多小伙伴對此也只是知道setInterval的定義、也是一知半解,今天我們就帶大家詳細介紹下JavaScript中setInterval的使用詳解!

setInterval動作的語法格式如下:

setInterval(function,interval[,arg1,arg2,......argn])
setInterval(object,methodName,interval[,arg1,arg2,.....argn])
登入後複製

第一種格式是標準動作面板中setInterval函數的預設語法,第二種格式是在專家模式動作中使用的方法。
其中的參數function是一個函數名稱或一個對匿名函數的參考。 object參數指定從Object物件派生的物件。 methodName制定 object參數中要呼叫的方法。
interval制定對function或methodName呼叫兩次之間的時間,單位是毫秒。後面的arg1等是可選的參數,用於制定傳遞給function或是methodName的參數。
setInterval它設定的時間間隔小於動畫幀速(如每秒10幀,相當於100毫秒),則按照盡可能接近interval的時間間隔呼叫函數。
而且必須使用updateAfterEvent動作來確保以足夠的頻率刷新螢幕。如果interval大於動畫幀速,則只用在每次播放頭進入某一幀是才調用,以減少每次刷新畫面的影響。
下面的例子每隔1秒呼叫一次匿名函數。

setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名的函数。成为匿名函数,后面的1000是时间间隔,单位是毫秒。
登入後複製

下面的範例為我們展示如何帶參數運行。

function show1(){
    trace("每隔1秒显示一次");
}
function show2(str){
    trace(str);
}
setInterval(show1,1000);
登入後複製

setInterval(show2,2000,"每隔2秒我就會顯示一次");上面已經將函數的setInterval方法介紹了。
下面我們將介紹物件的setInterval方法。
首先,寫一個setInterval在動作中呼叫物件的方法的例子,該例子不需要傳遞參數。

myobj=new Object();//创建一个新的对象
myobj.interval=function){
    trace("每隔1秒显示一次");
}//创建对象的方法。
setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。
登入後複製

接下來介紹如何傳遞參數。其實道理和函數的傳遞參數是一樣的。

myobj=new Object();
myobj.interval-function(str){
    trace(str);
}
setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");
登入後複製

注意。要呼叫為物件定義的方法時,必須在專家模式中使用第二種語法格式。
這樣子的話呢,我們來做一個動態顯示時間的畫面。可以用下面的程式碼實作。

setInterval(show,1000);
function show(){
    time=new Date();
    hour=time.getHours();
       minu=time.getMinutes();
       sec=time.get.Seconds();
    datetime=hour+":"+minu+":"+sec;
}//这里的datetime是一个动态文本框的变量名字。
登入後複製

這樣子呢,setInterval這個方法大家應該學的很好了。現在呢,我們學習clearInterval.
clearInterval動作的作用是清楚對setInterval函數的調用,它的語法格式如下clearInterval(intervalid);intervalid是調用setInterval函數後返回的物件。
下面舉一個簡單的例子。

function show(){
    trace("每隔一秒显示一次");
}
var sh;
sh=setInterval(show,1000);
clearInterval(sh);
登入後複製

總結:

#相信小夥伴們透過對本文的詳細學習,對JavaScript中的setInterval用法我有進一步的了解,希望對你的工作有幫助!

相關推薦:

#JS SetInterval 如何實作頁面輪詢教學

js中的setInterval和setTimeout使用實例

js使用setInterval實作倒數

##JS實作定時任務,每隔N秒請求後台setInterval定時和ajax請求

以上是JavaScript中setInterval的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板