簡単な紹介JavaScript には、setInterval() と setTimeout() の 2 つのタイマーがあり、それぞれにタイマーをキャンセルするメソッドがあります。 これらはすべてウィンドウ オブジェクトであり、呼び出し時にウィンドウを省略できます。これら 2 つのメソッドは JavaScript 仕様には含まれていません。 タイマーメソッド関連のメソッドは 4 つあります。
注意: setTimeout() は 1 回だけ実行されますが、setInterval() は指定された間隔で定期的に実行されます。 間隔の設定説明する
setInterval には複数のパラメータがあります。 まず、最初のパラメータがコード セグメントの場合、setInterval() メソッドはオプションになります。 2 番目に、最初のパラメータが関数の場合、setInterval() メソッドは複数のパラメータを持つことができます。 timerId = setInterval(func|code, delay, arg1, arg2, ...) とします。 パラメータ
パラメーター func|code は通常、関数を渡します。歴史的な理由により、コード文字列を渡すことはサポートされていますが、推奨されません。 戻り値戻り値 timeoutID は、タイマーの番号を示す正の整数です。この値を clearTimeout() に渡すとタイマーをキャンセルできます。 使用法これは、ボタンをクリックして 1 秒ごとに数値を増やす例です。 <p id="表示数"></p> <button onclick="timer()">クリックすると 1 秒ごとに数字が 1 つずつ増えます</button> <スクリプト> 定数 showNum = document.getElementById("showNum"); let timerId; // タイマーID num = 0 とします。 関数タイマー() { タイマーID = setInterval(addNum, 1000); } 関数addNum() { showNum.innerText = `${num++}`; } // タイマーを停止するコードが書かれていません</script> タイムアウトの設定説明する
timerId = setTimeout(func|code, delay, arg1, arg2, ...) とします。 パラメータ
パラメーター 使用法: <p id="表示数"></p> <button onclick="timer()">クリック後、1 秒待つと数字が 1 つ増えます</button> <スクリプト> 定数 showNum = document.getElementById("showNum"); タイマーIDを設定します。 num = 0 とします。 数値を追加します。 関数タイマー() { タイマーID = setTimeout(addNum, 1000); } 関数addNum() { showNum.innerText = `${num++}`; } </スクリプト> タイマーをキャンセルclearInterval() メソッドは、setInterval() によって設定されたタイマーをキャンセルします。 clearTimeout() メソッドは、setTimeout() によって設定されたタイマーをキャンセルします。 使い方は非常に簡単で、キャンセルするタイマーの識別子である timeoutID という 1 つのパラメーターのみを使用します。 間隔をクリアします(間隔ID); タイムアウトをクリアします(タイムアウトID); 使い方は簡単 関数タイマー() { タイマーID = setTimeout(addNum, 1000); } clearTimeout(timerId); // コードがこの行まで実行されると、timer によって設定されたタイマーはキャンセルされます。 コンソールでタイマーを使用するブラウザコンソールでタイマーを使用することもできます console.time(タイマー名)name という名前のタイマーを作成して開始します。 各タイマーには一意の名前を付ける必要があり、ページ上で同時に実行できるタイマーは最大 10,000 個です。 console.timeEnd(タイマー名)console.timeEnd(name) を呼び出してタイマーを停止し、経過時間をミリ秒単位で出力します。 console.time(タイマー名); console.timeEnd(タイマー名); 使用法for ループを 99999 回繰り返すのにかかる時間の例。 console.time(名前); num; を入力します。 (インデックス = 0、インデックス < 99999、インデックス++) { 数値++; } console.timeEnd(名前); 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSS で 2 つの固定列と 1 つの適応列を実装するいくつかの方法
例えば: <link rel="スタイルシート" href="h...
目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...
方法1コードをコピーコードは次のとおりです。 document.getElementById(&qu...
1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...
HTML 仕様書では、画像の crossorigin 属性が導入されています。適切なヘッダー情報 ...
導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...
目次01. レンダリングが不要な場合はuseStateを使用する02. リンクの代わりにrouter...
この記事では、ネイティブ JS で実装された特殊効果メッセージ ボックスを紹介します。効果は次のとお...
序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...
Alibaba Cloud サーバーを購入した後、新しいインスタンスが正常に動作できるようにするには...
# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...
目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...
ターミナルやコンソールで作業しているときは、メールを読むなど、もっと重要な作業があるかもしれないので...
1. 仮想環境virtualenvのインストール1. virtualenvをインストールするpip3...