ホームページ > ウェブフロントエンド > jsチュートリアル > 数秒間のスリープを実装するためのjsのカスタムメソッド_javascriptテクニック

数秒間のスリープを実装するためのjsのカスタムメソッド_javascriptテクニック

WBOY
リリース: 2016-05-16 16:42:09
オリジナル
1651 人が閲覧しました

js には組み込みのスリープ メソッドがありません。スリープしたい場合は、自分でメソッドを定義する必要があります。

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) も、非同期呼び出しのための面倒なコールバック関数の作成を避けるために JavaScript 構文の拡張に取り組んでいます。 jwacs を使用して実装されたスリープのコードは次のとおりです:

コードをコピーします コードは次のとおりです:

関数スリープ(ミリ秒) {
var k = function_continuation;
setTimeout(function() { 再開 k <- mesc; }, msec);
一時停止;
}

この構文はさらに恐ろしいもので、Java では推奨されていないスレッド メソッド名でもあります。率直に言って、私は Narrative JS の方が好きです。

Narrative JS と同様に、jwacs もプリコンパイルする必要があり、プリコンパイラーは LISP 言語で書かれています。現在はアルファ版でもあります。 2 つの間の詳細な紹介と比較については、SitePoint に関する新しい記事: 前処理による非同期 Javascript コールバックの排除

を参照してください。

複雑な JavaScript スクリプトを作成する場合、Java の Thread.sleep や sh スクリプトの sleep コマンドによって達成される効果と同様に、スクリプトを指定した期間停止させる必要がある場合があります。

ご存知のとおり、JavaScript には Java のようなスレッド制御機能はありません。setTimeout と setInterval という 2 つのメソッドがあり、タイミング実行制御を行うことができますが、すべての要件を満たすことはできません。長い間、多くの人が JavaScript でスリープ/一時停止/待機を実装する方法を尋ねてきましたが、確かにくだらない解決策がいくつかあります。

最も単純かつ最悪の方法はループを記述することです。コードは次のようになります:

コードをコピーします コードは次のとおりです:

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

上記のコードは実際にはスクリプト インタプリタをスリープさせませんが、CPU にすぐに高負荷をかけるという副作用があります。その期間、ブラウザが一時停止した状態でハングすることもあります。

第二に、IE の特別なダイアログ ボックスの実装を使用して、世界を飛び回る方法を見つける賢い人がいます。コードは次のとおりです。

コードをコピーします コードは次のとおりです:

関数 sleep(タイムアウト) {
window.showModalDialog("javascript:document.writeln('<script>window.setTimeout(function () { window.close(); }, " timeout ");</script>');");
}window.alert("寝る前に...");
睡眠(2000);
window.alert("睡眠後...");

言うまでもなく、IE でのみサポートされているという欠点があります (IE 7 ではセキュリティ制限により目的を達成できません)。

上記以外にも、アプレットを使用したり、Windows スクリプト ホストの WScript.Sleep() を呼び出したりするなどの賢いアイデアもあります。これらはすべて最終手段です。

最後に、賢明な人々が最善の解決策と思われるものを開発しました。まずコードを見てみましょう。

コードをコピーします コードは次のとおりです:

関数 sleep(millis) {
var notifier = NjsRuntime.createNotifier();
setTimeout(notifier, ミリ秒);
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>
ログイン後にコピー
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート