ホームページ > 記事 > ウェブフロントエンド > JavaScript タイミング イベントの理解と使用
JavaScript タイミング イベントは、Web サイトの時間計算において重要な役割を果たします。この記事は、それについてある程度理解するのに役立ちます。
JavaScript タイミング イベント
JavaScript を使用すると、関数が呼び出された直後ではなく、設定された時間間隔の後にコードを実行できます。これをタイミング イベントと呼びます。
JavaScript でタイミング イベントを使用するのは非常に簡単です。2 つの主要なメソッドは次のとおりです:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。 setTimeout() - 在指定的毫秒数后执行指定代码。
注: setInterval() と setTimeout() は、HTML DOM Window オブジェクトの 2 つのメソッドです。
setInterval() 方法 setInterval() 间隔指定的毫秒数不停地执行指定的代码
構文
window.setInterval("javascript function",milliseconds); window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()。 setInterval() 第一个参数是函数(function)。
ミリ秒単位の 2 番目のパラメータ間隔
注: 1000 ミリ秒は 1 秒です。
例
3 秒ごとに「hello」をポップアップします:
setInterval(function(){alert("Hello")},3000); 实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。
次の例では、現在時刻が表示されます。 setInterval() メソッドは、時計と同じように、コードが毎秒実行されるように設定します。
インスタンス
現在時刻を表示
var myVar=setInterval(function(){myTimer()},1000); function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t;}
実行を停止するには?
clearInterval()メソッドはsetInterval()メソッドの実行を停止する関数コードです。
構文
window.clearInterval(intervalVariable)
window.clearInterval()メソッドは、ウィンドウプレフィックスを使用せずに関数clearInterval()を直接使用できます。
clearInterval() メソッドを使用するには、タイミング メソッドの作成時にグローバル変数を使用する必要があります:
myVar=setInterval("javascript function",milliseconds);
その後、clearInterval() メソッドを使用して実行を停止できます。 。
例
次の例では、「停止」ボタンを追加しました。
<p id="demo"></p><button onclick="myStopFunction()">停止</button><script>var myVar=setInterval(function(){myTimer()},1000); function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } function myStopFunction(){ clearInterval(myVar); }</script>
setTimeout() メソッド
構文
myVar= window.setTimeout("javascript function", milliseconds); setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。 setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg。
2 番目のパラメーターは、最初のパラメーターを現在時刻から何ミリ秒後に実行するかを示します。
ヒント: 1000 ミリ秒は 1 秒に相当します。
例
3秒待ってから「Hello」をポップアップ表示します:
setTimeout(function(){alert("Hello")},3000);
実行を停止する方法?
clearTimeout()メソッドは、setTimeout()メソッドの関数コードの実行を停止するために使用されます。
構文
window.clearTimeout(timeoutVariable)
window.clearTimeout()メソッドはウィンドウプレフィックスを使用できません。
clearTimeout() メソッドを使用するには、作成タイムアウト メソッド (setTimeout) でグローバル変数を使用する必要があります:
myVar=setTimeout("javascript function",milliseconds);
関数がまだ実行されていない場合は、clearTimeout() メソッドを使用して関数の実行を停止できます。コード。
例
以下は同じ例ですが、「アラートを停止」ボタンが追加されています:
var myVar; function myFunction(){ myVar=setTimeout(function(){alert("Hello")},3000);} function myStopFunction(){ clearTimeout(myVar);}
JSのタイミングイベントの使用方法は、この記事で詳しく説明されています。その他の学習教材については、PHPに注目してください。中国語サイトが閲覧可能です。
関連する推奨事項:
以上がJavaScript タイミング イベントの理解と使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。