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 クロージャーの理解と使用

JavaScript Cookie の理解と使用

JavaScript フォーム検証に関する関連説明

以上がJavaScript タイミング イベントの理解と使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。