JavaScript_javascript スキルにおけるタイマー項目 23 の合理的な使用-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript_javascript スキルにおけるタイマー項目 23 の合理的な使用

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

JavaScript には、タイマー専用の関数が 2 つあります。

1. カウントダウンタイマー: timename=setTimeout("function();",laytime); 2. ループタイマー: timename=setInterval("function();",laytime);

1. タイマーの概要ウィンドウオブジェクトには、タイマー効果を実装する 2 つのメソッド、window.setTimeout() と window.setInterval が用意されています。前者は指定された時間の後にコードを実行できますが、後者は指定された時間ごとにコードを 1 回実行できます。そのプロトタイプは次のとおりです:

window.setTimeout(expression,milliseconds); 
window.setInterval(expression,milliseconds);

このうち、expression には引用符で囲まれたコードを指定することも、関数名を呼び出しハンドルとして使用すると、システムが自動的にその関数を呼び出すこともできます。パラメータを含めることはできません。文字列を使用する場合は、その中に渡すパラメータを記述することができます。 2 つのメソッドの 2 番目のパラメーターはミリ秒で、遅延または繰り返し実行のミリ秒数を表します。以下に 2 つの方法を紹介します。

SetInterval の使用は、遅延関数 setTimeout の設定と非常に似ています。 setTimeout は、操作を実行する前に一定期間遅延させるために使用されます。

setTimeout("function",time) はタイムアウトオブジェクトを設定します

setInterval("function",time) はタイムアウトオブジェクトを設定します

setInterval は自動的に繰り返され、setTimeout は繰り返されません。

clearTimeout(object) は、設定された setTimeout オブジェクトをクリアします

clearInterval(object) は setInterval オブジェクト

をクリアしますタイマーを使用して、JavaScript の遅延実行または繰り返し実行を実装します。

2. 具体的な用途

1． window.setTimeout メソッド

このメソッドは関数の実行を遅らせることができます。例:

function hello(){ 
  alert("hello"); 
} 
window.setTimeout(hello,5000);

このコードにより、ページを開いてから 5 秒後にダイアログボックス「hello」が表示されます。最後の文は次のように書くこともできます:

window.setTimeout("hello()",5000);

読者はそれらの違いを理解できるでしょう。このプロパティは window.setInterval メソッドにも存在します。

遅延期間に達する前に遅延実行をキャンセルする場合は、タイマーを表す ID を受け取る window.clearTimeout(timeoutId) メソッドを使用できます。この ID は、setTimeout メソッドによって返されます。例:

function hello(){ 
   alert("hello"); 
} 
var id=window.setTimeout(hello,5000); 
document.onclick=function(){ 
   window.clearTimeout(id); 
}

このように、表示をキャンセルしたい場合は、ページの任意の部分をクリックするだけで、window.clearTimeoutメソッドが実行され、タイムアウト操作がキャンセルされます。

2． window.setInterval メソッド

このメソッドでは、一定時間ごとに関数が呼び出されます。これは非常に一般的なメソッドです。スケジュールされた実行をキャンセルする場合は、clearTimeout メソッドと同様に、window.clearInterval メソッドを呼び出すことができます。また、clearInterval メソッドは、setInterval メソッドによって返された値をパラメータとして受け取ります。例:

//定义一个反复执行的调用 
var id=window.setInterval("somefunction",10000); 
//取消定时执行 
window.clearInterval(id);

3. デモ演習

上記のコードは、スケジュールされた実行をキャンセルする方法を説明するためにのみ使用されます。実際、setInterval メソッドは多くの場合に使用する必要があります。以下では、setInterval 関数の使用方法を紹介するストップウォッチを設計します。ストップウォッチには、時間を表示するための 2 つのボタンとテキストボックスが含まれます。スタートボタンをクリックすると計測が開始され、最小単位は0.01秒です。再度ボタンをクリックすると計測が停止し、テキストボックスに経過時間が表示されます。別のボタンを使用して、現在時刻をゼロにリセットします。実装コードは次のとおりです:

<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
  <form action="somepage.asp"> 
    <input type="text" value="0" name="txt1"/> 
    <input type="button" value="开始" name="btnStart"/> 
    <input type="button" value="重置" name="btnReset"/> 
  </form> 
</body> 
</html> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取表单中的表单域 
var txt=document.forms[0].elements["txt1"]; 
var btnStart=document.forms[0].elements["btnStart"]; 
var btnReset=document.forms[0].elements["btnReset"] 
//定义定时器的id 
var id; 
//每10毫秒该值增加1 
var seed=0; 
btnStart.onclick=function(){ 
   //根据按钮文本来判断当前操作 
   if(this.value=="开始"){ 
       //使按钮文本变为停止 
       this.value="停止"; 
       //使重置按钮不可用 
       btnReset.disabled=true; 
       //设置定时器，每0.01s跳一次 
       id=window.setInterval(tip,10); 
   }else{ 
       //使按钮文本变为开始 
       this.value="开始"; 
       //使重置按钮可用 
       btnReset.disabled=false; 
       //取消定时 
       window.clearInterval(id); 
   } 
} 
//重置按钮 
btnReset.onclick=function(){ 
   seed=0; 
} 
//让秒表跳一格 
function tip(){ 
   seed++; 
   txt.value=seed/100; 
} 
//--> 
</script>

3. タイマー呼び出しにパラメーターを渡します window.setTimeout であっても window.setInterval であっても、関数名を呼び出しハンドルとして使用する場合はパラメータを取得できないことが多く、解決策が必要です。たとえば、関数 hello(_name) は、ユーザー名

のウェルカムメッセージを表示するために使用されます。

var userName="jack"; 
//根据用户名显示欢迎信息 
function hello(_name){ 
   alert("hello,"+_name); 
}

現時点では、次のステートメントを使用して hello 関数の実行を 3 秒遅らせることは現実的ではありません:

window.setTimeout(hello(userName),3000);

これにより、hello 関数が即座に実行され、戻り値が呼び出しハンドルとして setTimeout 関数に渡されますが、その結果はプログラムが必要とするものではありません。文字列形式を使用すると、目的の結果を得ることができます:

window.setTimeout("hello(userName)",3000);

ここでの文字列は JavaScript コードの一部であり、userName は変数を表します。ただし、この書き方は十分直感的ではないため、場合によっては関数名を使用する必要があります。パラメーターを使用して関数を呼び出すには、次のようなちょっとしたトリックがあります。

ここでは、パラメータを受け取り、パラメータなしで関数を返す関数 _hello が定義されており、外部関数のパラメータはこの関数内で使用されるため、パラメータを使用せずに呼び出すことができます。 window.setTimeout 関数では、_hello(userName) を使用してパラメータなしで関数ハンドルを返すことで、パラメータを渡す関数を実現します。

var userName="jack"; 
//根据用户名显示欢迎信息 
function hello(_name){ 
    alert("hello,"+_name); 
} 
//创建一个函数，用于返回一个无参数函数 
function _hello(_name){ 
    return function(){ 
       hello(_name); 
    } 
} 
window.setTimeout(_hello(userName),3000); 
</script>

4. タイマーの「タイミング」機能を正しく理解する

まずコードを見てみましょう

代码先输出哪个？答案在程序中很明显。为什么呢？

初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序，指派某个代码在某个时间点运行。

下面说下Javascript线程，下图表示javascript进程时间线。

除了javascript执行进程外，还有一个需要在进程下一次空闲时间执行的代码队列，随着页面在其生命周期内的推移，代码会按照执行顺序添加到对列中，例如：当一个按钮被按下时，它的事件处理就会添加到队列中，并在下一个可能的时间内执行。

定时器对队列的工作方式是，当特定的时间过去后，将代码插入，注意添加到队列并不意味着它会马上执行，而只能说它会尽快执行，设定一个250ms后执行的定时器，不代表250ms后它会马上执行，它只会表示在250ms后被加入到队列中，如果这个时间点队列是空闲的，那么这段代码就会被执行。

请看以下代码：

var btn = document.getElementById("mybtn");
  btn.onclick = function () {
    setTimeout(function () {
      document.getElementById("message").nodeName = "mymessage";
      //其它代码
    }, 250);
  }

对于定时器最要注意的是：指定的时间间隔表示何时将定时器的代码添加到队列中，而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图：

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、