この記事では、js でのタイマー関数の使用方法を紹介します (コード付き)。必要な方は参考にしていただければ幸いです。
1. setTimeout()
setTimeout 関数は、関数または特定のコード部分が実行されるまでのミリ秒数を指定するために使用されます。タイマー番号を表す整数を返します。これは後でタイマーをキャンセルするために使用できます。
var timerId = setTimeout(func|code, delay)
上記のコードでは、setTimeout 関数は 2 つのパラメーターを受け取ります。最初のパラメーター func|code は遅延する関数の名前またはコードの一部であり、2 番目のパラメーター遅延は実行を遅延するミリ秒数です。
エンジンは内部で eval 関数を使用して文字列をコードに変換するため、実行を延期するコードは文字列の形式で setTimeout に入れる必要があることに注意してください。延期された実行が関数の場合は、関数名を setTimeout に直接入力できます。一方では eval 関数にはセキュリティ上の懸念があり、他方では JavaScript エンジンによるコードの最適化を容易にするために、通常、setTimeout メソッドは以下に示すように関数名の形式をとります。
function f(){ console.log(2); } setTimeout(f,1000); // 或者 setTimeout(function (){ console.log(2) },1000);
setTimeout の 2 番目のパラメータが省略された場合、このパラメータのデフォルトは 0 です。
最初の 2 つのパラメーターに加えて、setTimeout ではさらにパラメーターを追加することもできます。これらは遅延関数 (コールバック関数) に渡されます。
setTimeout(function(a,b){ console.log(a+b); },1000,1,1);
上記のコードでは、setTimeout に合計 4 つのパラメーターがあります。最後の 2 つのパラメーターは、コールバック関数が 1000 ミリ秒後に実行されるときに、コールバック関数のパラメーターとして使用されます。
IE9.0 以下では、setTimeout に 2 つのパラメーターのみが許可され、それ以上のパラメーターはサポートされません。現時点では 3 つの解決策があります。 1 つ目は、匿名関数のパラメータを指定してコールバック関数を実行し、その匿名関数を setTimeout に入力する方法です。
setTimeout(function() { myFunc("one","two", "three"); }, 1000);
上記のコードでは、myFunc は実際に実行を延期したい関数であり、3 つのパラメーターがあります。 setTimeout を直接置く場合、IE の以前のバージョンではパラメーターを受け取ることができないため、匿名関数に置くことができます。
2 番目の解決策は、bind メソッドを使用して追加のパラメーターをコールバック関数にバインドし、新しい関数入力 setTimeout を生成することです。
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
上記のコードでは、bind メソッドの最初のパラメータは未定義です。これは、元の関数の this がグローバル スコープにバインドされていることを意味し、2 番目のパラメータは元の関数に渡されるパラメータです。実行すると、パラメーターを受け取らない新しい関数が返されます。
3 番目の解決策は、setTimeout をカスタマイズし、apply メソッドを使用してコールバック関数にパラメーターを入力することです。
<!--[if lte IE 9]> <script>(function(f){ window.setTimeout =f(window.setTimeout); window.setInterval =f(window.setInterval); })(function(f){ return function(c,t){ var a=[].slice.call(arguments,2); returnf(function(){ c.apply(this,a)},t)}}); </script> <![endif]-->
パラメーターの問題に加えて、setTimeout について注意すべき点がもう 1 つあります。setTimeout によって延期されたコールバック関数がオブジェクトのメソッドである場合、メソッド内の this キーワードは、それがあった場所ではなく、グローバル環境を指すことになります。そのオブジェクトを定義しました。
var x = 1; var o = { x: 2, y: function(){ console.log(this.x); } }; setTimeout(o.y,1000);
出力結果: 1
上記のコードは 2 ではなく 1 を出力します。これは、o.y の this が o を指しているのではなく、グローバル環境を指していることを意味します。
エラーを見つけるのが難しい別の例を見てください。
function User(login) { this.login = login; this.sayHi = function(){ console.log(this.login); } } var user = new User('John'); setTimeout(user.sayHi, 1000);
上記のコードでは、user.sayHi が実行されるとグローバルオブジェクト内で実行されるため、this.login は値を取得できないため、未定義のみが表示されます。
この問題を防ぐための 1 つの解決策は、関数で user.sayHi を実行することです。
setTimeout(function() { user.sayHi(); }, 1000);
上記コードでは、sayHiはグローバルスコープではなくユーザースコープで実行されるため、正しい値が表示されます。
もう 1 つの解決策は、bind メソッドを使用して、sayHi をユーザーにバインドすることです。
setTimeout(user.sayHi.bind(user), 1000);
HTML 5 標準では、setTimeout の最小時間間隔は 4 ミリ秒であると規定されています。電力を節約するために、ブラウザは現在のウィンドウにないページの時間間隔を 1000 ミリ秒に拡張します。さらに、ラップトップがバッテリー電源で動作している場合、Chrome および IE 9 以降では、時間間隔がシステム タイマー (約 15.6 ミリ秒) に切り替わります。
2. setInterval()
setInterval 関数の使用法は setTimeout とまったく同じです。唯一の違いは、setInterval は特定のタスクを 1 回おきに実行することを指定することです。これは、スケジュールされた実行回数が無限ではないことを意味します。 。
<input type="button" onclick="clearInterval(timer)"value="stop"> <script> var i = 1 var timer = setInterval(function(){ console.log(2); }, 1000); </script>
上記のコードは、ユーザーが停止ボタンをクリックするまで、1000 ミリ秒ごとに 2 が出力されることを意味します。
setTimeout と同様に、最初の 2 つのパラメーターに加えて、setInterval メソッドはコールバック関数に渡される追加のパラメーターも受け入れることができます。以下にその例を示します。
function f(){ for (var i=0;i<arguments.length;i++){ console.log(arguments[i]); } } setInterval(f, 1000, "Hello World");
Web ページがブラウザの現在のウィンドウ (またはタブ) にない場合、多くのブラウザでは、setInteral で指定された繰り返しタスクの実行が最大 1 秒に 1 回に制限されます。
以下は、setInterval メソッドを使用して Web ページのアニメーションを実装する例です。
var p = document.getElementById('somep'); var opacity = 1; var fader = setInterval(function() { opacity -= 0.1; if (opacity >= 0) { p.style.opacity = opacity; } else { clearInterval(fader); }}, 100);
上記のコードは、p 要素の透明度を完全に透明になるまで 100 ミリ秒ごとに設定します。
setInterval の一般的な使用法は、ポーリングを実装することです。以下は、URL のハッシュ値が変化したかどうかをポーリングする例です。
var hash = window.location.hash; var hashWatcher = setInterval(function() { if (window.location.hash != hash) { updatePage(); }}, 1000);
setInterval は「実行開始」の間隔を指定するものであり、各タスクの実行自体にかかる時間は考慮されません。したがって、実際には、実行間隔は指定された時間よりも短くなります。たとえば、setInterval は 100 ミリ秒ごとの実行を指定し、各実行には 5 ミリ秒かかります。その後、最初の実行が終了してから 95 ミリ秒後に 2 回目の実行が開始されます。実行に特に長い時間がかかる場合 (たとえば 105 ミリ秒)、終了後すぐに次の実行が開始されます。
为了确保两次执行之间有固定的间隔,可以不用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。
var i = 1; var timer = setTimeout(function() { alert(i++); timer = setTimeout(arguments.callee,2000); }, 2000);
上面代码可以确保,下一个对话框总是在关闭上一个对话框之后2000毫秒弹出。
根据这种思路,可以自己部署一个函数,实现间隔时间确定的setInterval的效果。
function interval(func, wait){ var interv = function(){ func.call(null); setTimeout(interv,wait); }; setTimeout(interv,wait); }interval(function(){ console.log(2); },1000);
上面代码部署了一个interval函数,用循环调用setTimeout模拟了setInterval。
HTML5标准规定,setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒。
3,clearTimeOut(),clearInterval()
setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。
var id1 = setTimeout(f,1000); var id2 = setInterval(f,1000); clearTimeout(id1); clearInterval(id2);
setTimeout和setInterval返回的整数值是连续的,也就是说,第二个setTimeout方法返回的整数值,将比第一个的整数值大1。利用这一点,可以写一个函数,取消当前所有的setTimeout。
(function() { var gid = setInterval(clearAllTimeouts,0); function clearAllTimeouts(){ var id = setTimeout(function(){}, 0); while (id >0) { if (id !==gid) { clearTimeout(id); } id--; } }})();
运行上面代码后,实际上再设置任何setTimeout都无效了。
下面是一个clearTimeout实际应用的例子。有些网站会实时将用户在文本框的输入,通过Ajax方法传回服务器,jQuery的写法如下。
$('textarea').on('keydown', ajaxAction);
这样写有一个很大的缺点,就是如果用户连续击键,就会连续触发keydown事件,造成大量的Ajax通信。这是不必要的,而且很可能会发生性能问题。正确的做法应该是,设置一个门槛值,表示两次Ajax通信的最小间隔时间。如果在设定的时间内,发生新的keydown事件,则不触发Ajax通信,并且重新开始计时。如果过了指定时间,没有发生新的keydown事件,将进行Ajax通信将数据发送出去。
这种做法叫做debounce(防抖动)方法,用来返回一个新函数。只有当两次触发之间的时间间隔大于事先设定的值,这个新函数才会运行实际的任务。假定两次Ajax通信的间隔不小于2500毫秒,上面的代码可以改写成下面这样。
$('textarea').on('keydown', debounce(ajaxAction, 2500))
利用setTimeout和clearTimeout,可以实现debounce方法,该方法用于防止某个函数在短时间内被密集调用。具体来说,debounce方法返回一个新版的该函数,这个新版函数调用后,只有在指定时间内没有新的调用,才会执行,否则就重新计时。
function debounce(fn, delay){ var timer = null;// 声明计时器 return function(){ var context =this; var args = arguments; clearTimeout(timer); timer = setTimeout(function(){ fn.apply(context,args); }, delay); }; }
// 用法示例
var todoChanges = _.debounce(batchLog, 1000); Object.observe(models.todo, todoChanges);
现实中,最好不要设置太多个setTimeout和setInterval,它们耗费CPU。比较理想的做法是,将要推迟执行的代码都放在一个函数里,然后只对这个函数使用setTimeout或setInterval。
4,运行机制
setTimeout和setInterval的运行机制是,将指定的代码移出本次执行,等到下一轮EventLoop时,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就等到再下一轮Event Loop时重新判断。
这意味着,setTimeout和setInterval指定的代码,必须等到本轮EventLoop的所有同步任务都执行完,再等到本轮EventLoop的“任务队列”的所有任务执行完,才会开始执行。由于前面的任务到底需要多少时间执行完,是不确定的,所以没有办法保证,setTimeout和setInterval指定的任务,一定会按照预定时间执行。
setTimeout(someTask, 100); veryLongTask();
上面代码的setTimeout,指定100毫秒以后运行一个任务。但是,如果后面的veryLongTask函数(同步任务)运行时间非常长,过了100毫秒还无法结束,那么被推迟运行的someTask就只有等着,等到veryLongTask运行结束,才轮到它执行。
这一点对于setInterval影响尤其大。
setInterval(function () { console.log(2); }, 1000); (function () { sleeping(3000); })();
上面的第一行语句要求每隔1000毫秒,就输出一个2。但是,第二行语句需要3000毫秒才能完成,请问会发生什么结果?
结果就是等到第二行语句运行完成以后,立刻连续输出三个2,然后开始每隔1000毫秒,输出一个2。也就是说,setIntervel具有累积效应,如果某个操作特别耗时,超过了setInterval的时间间隔,排在后面的操作会被累积起来,然后在很短的时间内连续触发,这可能或造成性能问题(比如集中发出Ajax请求)。
5, setTimeout(f,0)
setTimeout的作用是将代码推迟到指定时间执行,如果指定时间为0,即setTimeout(f, 0),那么会立刻执行吗?
答案是不会。因为上一段说过,必须要等到当前脚本的同步任务和“任务队列”中已有的事件,全部处理完以后,才会执行setTimeout指定的任务。也就是说,setTimeout的真正作用是,在“消息队列”的现有消息的后面再添加一个消息,规定在指定时间执行某段代码。setTimeout添加的事件,会在下一次Event Loop执行。
setTimeout(f, 0)将第二个参数设为0,作用是让f在现有的任务(脚本的同步任务和“消息队列”指定的任务)一结束就立刻执行。也就是说,setTimeout(f, 0)的作用是,尽可能早地执行指定的任务。而并不是会立刻就执行这个任务。
setTimeout(function () { console.log('hello world!'); }, 0);
上面代码的含义是,尽可能早地显示“hello world!”。
setTimeout(f, 0)指定的任务,最早也要到下一次EventLoop才会执行。请看下面的例子。
setTimeout(function() { console.log("Timeout"); }, 0) function a(x) { console.log("a()开始运行"); b(x); console.log("a()结束运行"); } function b(y) { console.log("b()开始运行"); console.log("传入的值为" + y); console.log("b()结束运行"); } console.log("当前任务开始"); a(42); console.log("当前任务结束");
输出结果如下:
// 当前任务开始, a() 开始运行, b() 开始运行, 传入的值为42,b() 结束运行, a() 结束运行, 当前任务结束
上面代码说明,setTimeout(f, 0)必须要等到当前脚本的所有同步任务结束后才会执行。
即使消息队列是空的,0毫秒实际上也是达不到的。根据HTML5标准,setTimeout推迟执行的时间,最少是4毫秒。如果小于这个值,会被自动增加到4。这是为了防止多个setTimeout(f, 0)语句连续执行,造成性能问题。
另一方面,浏览器内部使用32位带符号的整数,来储存推迟执行的时间。这意味着setTimeout最多只能推迟执行2147483647毫秒(24.8天),超过这个时间会发生溢出,导致回调函数将在当前任务队列结束后立即执行,即等同于setTimeout(f, 0)的效果。
6 ,正常任务与微任务
正常情况下,JavaScript的任务是同步执行的,即执行完前一个任务,然后执行后一个任务。只有遇到异步任务的情况下,执行顺序才会改变。
这时,需要区分两种任务:正常任务(task)与微任务(microtask)。它们的区别在于,“正常任务”在下一轮EventLoop执行,“微任务”在本轮Event Loop的所有任务结束后执行。
console.log(1); setTimeout(function() { console.log(2); }, 0); Promise.resolve().then(function() { console.log(3); }).then(function() { console.log(4); }); console.log(5);
输出结果如下:
// 1, 5,3,4, 2
上面代码的执行结果说明,setTimeout(fn, 0)在Promise.resolve之后执行。
这是因为setTimeout语句指定的是“正常任务”,即不会在当前的Event Loop执行。而Promise会将它的回调函数,在状态改变后的那一轮Event Loop指定为微任务。所以,3和4输出在5之后、2之前。
正常任务包括以下情况。
• setTimeout
• setInterval
• setImmediate
• I/O
• 各种事件(比如鼠标单击事件)的回调函数
微任务目前主要是process.nextTick和 Promise 这两种情况。
相关推荐:
以上がjs でのタイマー関数の使い方の紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

WebStorm Mac版
便利なJavaScript開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

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

Dreamweaver Mac版
ビジュアル Web 開発ツール
