js中自定義方法實(shí)現(xiàn)停留幾秒sleep
js中不存在自帶的sleep方法,要想休眠要自己定義個(gè)方法
function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } }
以下是補(bǔ)充:
除了Narrative JS,jwacs(Javascript With Advanced Continuation Support) 也致力于通過擴(kuò)展JavaScript語法來避免編寫讓人頭痛的異步調(diào)用的回調(diào)函數(shù)。用jwacs 實(shí)現(xiàn)的sleep,代碼是這樣:
function sleep(msec) {
var k = function_continuation;
setTimeout(function() { resume k <- mesc; }, msec);
suspend;
}
這個(gè)語法更嚇人了,而且還是java里不被推薦使用的線程方法名。坦白說我傾向于 Narrative JS。
同Narrative JS一樣,jwacs也需要預(yù)編譯,預(yù)編譯器是用 LISP 語言編寫。目前也是 Alpha 的版本。兩者的更多介紹和比較可以參閱 SitePoint 上的新文章: Eliminating async Javascript callbacks by preprocessing
編寫復(fù)雜的JavaScript腳本時(shí),有時(shí)會有需求希望腳本能停滯指定的一段時(shí)間,類似于 java 中的 Thread.sleep 或者 sh 腳本中的 sleep 命令所實(shí)現(xiàn)的效果。
眾所周知,JavaScript 并沒有提供類似于 Java 的線程控制的功能, 雖然有 setTimeout 和 setInterval 兩個(gè)方法可以做一些定時(shí)執(zhí)行控制,但并不能滿足所有的要求。一直以來,都有很多人問如何在JavaScript中實(shí)現(xiàn) sleep/pause/wait ,也確實(shí)有些很蹩腳的解決方案:
最簡單也最糟糕的方法就是寫一個(gè)循環(huán),代碼可能如下:
function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
如上的代碼其實(shí)并沒有讓腳本解釋器sleep下來,而且有讓CPU迅速上到高負(fù)荷的附作用。瀏覽器甚至?xí)谠摱螘r(shí)間內(nèi)處于假死狀態(tài)。
其二有聰明人利用IE特殊的對話框?qū)崿F(xiàn)來曲徑通幽,代碼可能如下:
function sleep(timeout) {
window.showModalDialog("javascript:document.writeln('<script>window.setTimeout(function () { window.close(); }, " + timeout + ");<\/script>');");
}window.alert("before sleep ...");
sleep(2000);
window.alert("after sleep ...");
缺點(diǎn)不用多說,只有IE支持(IE7因?yàn)榘踩拗埔捕荒苓_(dá)到目的)。
除上之外,還有利用Applet或者調(diào)用Windows Script Host的WScript.Sleep()等等鬼點(diǎn)子,這些都是萬不得已的權(quán)宜之計(jì)。
終于有了更聰明的人,開發(fā)出了也許是最佳的方案,先看代碼:
function sleep(millis) {
var notifier = NjsRuntime.createNotifier();
setTimeout(notifier, millis);
notifier.wait->();
}
沒錯(cuò),看到 ->() 這樣的語法,就象剛看到Prototype的 $() 函數(shù)一樣讓我驚為天人。不過直接在瀏覽器中這段腳本是會報(bào)告語法錯(cuò)誤的。實(shí)際上它們需要經(jīng)過預(yù)編譯成客戶端瀏覽器認(rèn)可的JavaScript。編譯后的腳本如下:
function sleep(millis){
var njf1 = njen(this,arguments,"millis");
nj:while(1) {
try{switch(njf1.cp) {
case 0:njf1._notifier=NjsRuntime.createNotifier();
setTimeout(njf1._notifier,njf1._millis);
njf1.cp = 1;
njf1._notifier.wait(njf1);
return;
case 1:break nj;
}} catch(ex) {
if(!njf1.except(ex,1))
return;
}}
njf1.pf();
}
我看不懂,也不想去看懂了。這些工作全部會由 Narrative JavaScript ———— 一個(gè)提供異步阻塞功能的JS擴(kuò)展幫我們實(shí)現(xiàn)。我們只需要編寫之前那個(gè)怪異的 ->() 語法, 然后通過后臺預(yù)先靜態(tài)編譯或者前臺動態(tài)編譯后執(zhí)行就可以實(shí)現(xiàn) sleep 的效果。
Narrative JavaScript 宣稱可以讓你從頭昏眼花的回調(diào)函數(shù)中解脫出來,編寫清晰的Long Running Tasks。目前還是 alpha 的版本,在 Example 頁面上有一個(gè)移動的按鈕的范例。首頁上也提供了源碼下載。以我薄弱的基礎(chǔ)知識,我只能勉強(qiáng)的看出代碼中模擬了狀態(tài)機(jī)的實(shí)現(xiàn),希望有精通算法的朋友能為我們解析。
最后,還是我一直以來的觀點(diǎn): 除非很必要,否則請保持JavaScript的簡單。在JavaScript 能提供原生的線程支持之前,或許我們可以改變設(shè)計(jì)以避免異步阻塞的應(yīng)用。
有bug的曲折實(shí)現(xiàn)
<script type"text/javascript"> /*Javascript中暫停功能的實(shí)現(xiàn) Javascript本身沒有暫停功能(sleep不能使用)同時(shí) vbscript也不能使用doEvents,故編寫此函數(shù)實(shí)現(xiàn)此功能。 javascript作為弱對象語言,一個(gè)函數(shù)也可以作為一個(gè)對象使用。 比如: [code] function Test(){ alert("hellow"); this.NextStep=function(){ alert("NextStep"); } } 我們可以這樣調(diào)用 var myTest=new Test();myTest.NextStep(); 我們做暫停的時(shí)候可以吧一個(gè)函數(shù)分為兩部分,暫停操作前的不變,把要在暫停后執(zhí)行的代碼放在this.NextStep中。 為了控制暫停和繼續(xù),我們需要編寫兩個(gè)函數(shù)來分別實(shí)現(xiàn)暫停和繼續(xù)功能。 暫停函數(shù)如下: */ function Pause(obj,iMinSecond){ if (window.eventList==null) window.eventList=new Array(); var ind=-1; for (var i=0;i<window.eventList.length;i++){ if (window.eventList[i]==null) { window.eventList[i]=obj; ind=i; break; } } if (ind==-1){ ind=window.eventList.length; window.eventList[ind]=obj; } setTimeout("GoOn(" + ind + ")",1000); } /* 該函數(shù)把要暫停的函數(shù)放到數(shù)組window.eventList里,同時(shí)通過setTimeout來調(diào)用繼續(xù)函數(shù)。 繼續(xù)函數(shù)如下: */ function GoOn(ind){ var obj=window.eventList[ind]; window.eventList[ind]=null; if (obj.NextStep) obj.NextStep(); else obj(); } /* 該函數(shù)調(diào)用被暫停的函數(shù)的NextStep方法,如果沒有這個(gè)方法則重新調(diào)用該函數(shù)。 函數(shù)編寫完畢,我們可以作如下冊是: */ function Test(){ alert("hellow"); Pause(this,1000);//調(diào)用暫停函數(shù) this.NextStep=function(){ alert("NextStep"); } } </script>
相關(guān)文章
JS實(shí)現(xiàn)表單多文件上傳樣式美化支持選中文件后刪除相關(guān)項(xiàng)
在項(xiàng)目開發(fā)中我們經(jīng)常遇到文件上傳的功能,根據(jù)需求有多文件上傳和單文件上傳,今天小編給大家實(shí)例講解下表單多文件上傳樣式美化支持選中文件后刪除相關(guān)項(xiàng),非常不錯(cuò),感興趣的朋友一起看看吧2016-09-09前端使用JSON.stringify實(shí)現(xiàn)深拷貝的巨坑詳解
這篇文章主要為大家介紹了JSON.stringify實(shí)現(xiàn)深拷貝的巨坑詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Bootstrap實(shí)現(xiàn)的經(jīng)典柵格布局效果實(shí)例【附demo源碼】
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的經(jīng)典柵格布局效果,結(jié)合具體實(shí)例形式分析了基于BootStrap實(shí)現(xiàn)柵格布局的完整步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03JS使用tween.js動畫庫實(shí)現(xiàn)輪播圖并且有切換功能
本文通過實(shí)例代碼給大家介紹了JS使用tween.js動畫庫實(shí)現(xiàn)輪播圖并且有切換功能,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07