首頁 >web前端 >js教程 >js中自訂方法實作停留幾秒sleep_javascript技巧

js中自訂方法實作停留幾秒sleep_javascript技巧

WBOY
WBOY原創
2016-05-16 16:42:091659瀏覽

js中不存在自帶的sleep方法,要想休眠要自己定義個方法

function sleep(numberMillis) { 
var now = new Date(); 
var exitTime = now.getTime() + numberMillis; 
while (true) { 
now = new Date(); 
if (now.getTime() > exitTime) 
return; 
} 
}

以下是補充:

除了Narrative JS,jwacs(Javascript With Advanced Continuation Support) 也致力於透過擴展JavaScript語法來避免編寫讓人頭痛的非同步呼叫的回呼函數。用jwacs 實作的sleep,程式碼是這樣:

複製程式碼 程式碼如下:

function sleep(msec) {
    var k = function_continuation;
    setTimeout(function() { resume k     suspend;
}

這個語法更嚇人了,而且還是java裡不被推薦使用的執行緒方法名稱。坦白說我傾向於 Narrative JS。

和Narrative JS一樣,jwacs也需要預先編譯,預編譯器是用 LISP 語言寫。目前也是 Alpha 的版本。兩者的更多介紹和比較可以參考 SitePoint 上的新文章: Eliminating async Javascript callbacks by preprocessing

編寫複雜的JavaScript腳本時,有時會有需求希望腳本能停滯指定的一段時間,類似於 java 中的 Thread.sleep 或 sh 腳本中的 sleep 指令所實現的效果。

眾所周知,JavaScript 並沒有提供類似 Java 的執行緒控制的功能, 雖然有 setTimeout 和 setInterval 兩個方法可以做一些定時執行控制,但並不能滿足所有的要求。一直以來,都有很多人問如何在JavaScript中實作 sleep/pause/wait ,也確實有些很蹩腳的解決方案:

最簡單也最糟糕的方法就是寫一個循環,程式碼可能如下:

複製程式碼 程式碼如下:

function sleep(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() numberMillis;
    while (true) {
        now = new Date();
        if (now.getTime() > exitTime)
            return;
    }
}

如上的程式碼其實並沒有讓腳本解釋器sleep下來,而且有讓CPU迅速上到高負荷的附作用。瀏覽器甚至會在該段時間處於假死狀態。

其二有聰明人利用IE特殊的對話框實作來曲徑通幽,程式碼可能如下:

複製程式碼 程式碼如下:

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 ...");

缺點不用多說,只有IE支援(IE7因為安全限制也不能達到目的)。

除上之外,還有利用Applet或是呼叫Windows Script Host的WScript.Sleep()等等鬼點子,這些都是萬不得已的權宜之計。

終於有了更聰明的人,開發出了也許是最佳的方案,先看程式碼:

複製程式碼 程式碼如下:

function sleep(millis) {
    var notifier = NjsRuntime.createNotifier();
    setTimeout(notifier, millis);
    notifier.wait->();
}

沒錯,看到 ->() 這樣的語法,就像剛看到Prototype的 $() 函數一樣讓我驚為天人。不過直接在瀏覽器中這段腳本是會回報語法錯誤的。實際上它們需要預先編譯成客戶端瀏覽器認可的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 ———— 一个提供异步阻塞功能的JS扩展帮我们实现。我们只需要编写之前那个怪异的 ->() 语法, 然后通过后台预先静态编译或者前台动态编译后执行就可以实现 sleep 的效果。
Narrative JavaScript 宣称可以让你从头昏眼花的回调函数中解脱出来,编写清晰的Long Running Tasks。目前还是 alpha 的版本,在 Example 页面上有一个移动的按钮的范例。首页上也提供了源码下载。以我薄弱的基础知识,我只能勉强的看出代码中模拟了状态机的实现,希望有精通算法的朋友能为我们解析。
最后,还是我一直以来的观点: 除非很必要,否则请保持JavaScript的简单。在JavaScript 能提供原生的线程支持之前,或许我们可以改变设计以避免异步阻塞的应用。

有bug的曲折实现

<script type"text/javascript">
/*Javascript中暂停功能的实现
Javascript本身没有暂停功能(sleep不能使用)同时 vbscript也不能使用doEvents,故编写此函数实现此功能。
javascript作为弱对象语言,一个函数也可以作为一个对象使用。
比如:

[code]
function Test(){
 alert("hellow");
 this.NextStep=function(){
 alert("NextStep");
 }
}
我们可以这样调用 var myTest=new Test();myTest.NextStep();
我们做暂停的时候可以吧一个函数分为两部分,暂停操作前的不变,把要在暂停后执行的代码放在this.NextStep中。
为了控制暂停和继续,我们需要编写两个函数来分别实现暂停和继续功能。
暂停函数如下:
*/
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);
}
/*
该函数把要暂停的函数放到数组window.eventList里,同时通过setTimeout来调用继续函数。
继续函数如下:
*/

function GoOn(ind){
 var obj=window.eventList[ind];
 window.eventList[ind]=null;
 if (obj.NextStep) obj.NextStep();
 else obj();
}
/*
该函数调用被暂停的函数的NextStep方法,如果没有这个方法则重新调用该函数。
函数编写完毕,我们可以作如下册是:
*/
function Test(){
 alert("hellow");
 Pause(this,1000);//调用暂停函数
 this.NextStep=function(){
 alert("NextStep");
 }
}
</script>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn