タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
こんにちは。ぬこすけ です。 皆さんは「 setTimeout とはどんな関数でしょう？」と聞いたら、どう答えますか？ おそらく、ほとんどの人が「指定した時間に処理が走るようにする関数」と答えるのではないでしょうか？ function main() { console.log('動いたよ！！'); } // 大体 ３ 秒後に main 関数が動き出す setTimeout(main, 3000); 大雑把な理解としては問題ないですが、実は setTimeout の隠された能力はそれだけではありません。 setTimeout の隠された能力を知るとどんな良いことがあるのでしょうか？ 例えば、次のような良いことがあります。 ブラウザに対する理解が深まる Web サイトのパフォーマンスを向上させることができる ドヤれる まず、 ブラウザに対する理解が深まります 。 かのアリストテレスはこう言い残
nextTick vs queueMicrotask vs Promise.resolve vs setTimeout - Qiita
はじめに 普段の開発でなかなかお目にかかることも使うことも滅多にない queueMicrotask について興味を持ったついでに、 process.nextTick や Promise, setTimeout などとの比較をしてみました。 TL;DR 下記の優先度順でキューからタスクが取り出され処理される。 nextTick queueMicrotask, Promise.resolve → Microtask setTimeout → Task (a.k.a. Macrotask) より具体的には、MicrotaskキューとTaskキューの2つのキューがあり、Microtaskキューが優先的に処理されるようになっている。 Microtaskキューが空でない限りはTaskキューの中身を実行しない構造となっており、queueMicrotask, Promise.resolve では Micr
await new Promise(resolve => setTimeout(resolve, 3000)) // 3秒待つ // ... 3秒後の処理 ... // よくある長めの実装 const sleep = () => new Promise(resolve => { setTimeout(() => { resolve() }, 3000) }) await sleep() // ステップ1: () => { resolve() } は resolve に短縮する const sleep = () => new Promise(resolve => { setTimeout(resolve, 3000) }) await sleep() // ステップ2: resolve => {} は resolve => に短縮する const sleep = () => new Prom
関数をすぐには実行させず、ある時点で実行するようにしたいことがあります。それは “呼び出しのスケジューリング” と呼ばれます。 そのための2つのメソッドがあります。: setTimeout は指定時間経過後、一度だけ関数を実行します。 setInterval は各実行の間は指定した間隔で、定期的に関数を実行します。 それらのメソッドは JavaScript の仕様の一部ではありません。しかしほとんどの環境は内部スケジューラをもち、それらのメソッドを提供します。特に、これらはすべてのブラウザと Node.js でサポートされています。
TypeScriptでsetTimeout()がNodeJS.Timerになる理由から、window.setTimeout()との違いを理解する - このすみノート
AngularのSPA(Single Page Application)のプログラムを書いてたら、以下の問題に遭遇しました。 TypeScriptのコード内でのsetInterval()の返り値には罠がある https://blog.kubosho.com/entry/setinterval-trap-on-typescript/ 内容としては「Type 'Timer' is not assignable to type 'number'.」というエラーメッセージが表示されます。 VSCode(Visual Studio Code)で関数の戻り値を確認すると、戻り値の型はNodeJS.Timerになってます。 私の場合は、Angularで「setTimeout()」を記述しただけです。なぜそれが「NodeJS.Timer」となってしまうのか気になったので、調べてみました。 window.s
JavaScriptではsetTimeoutという関数を使うことができます。 しかし、実はこの関数は言語仕様（ECMAScript）に組み込まれているものではありません。 ブラウザ上で動くJavaScriptの場合、setTimeoutはHTMLの仕様によって定義されています。 このHTMLの仕様はHTMLとは名ばかりの巨大な仕様で、今時のブラウザの挙動をほぼ全て規定しているといっても過言ではありません。 さて、setTimeoutにとても大きな数値を渡したときの挙動に関するツイートをTwitterで見かけました。 曰く、setTimeoutに渡す数値は32ビット整数しかサポートされていないというのです。 試してみると、次のようなものは確かに一瞬でタイマーが呼ばれてしまい、想定した挙動とは違うように思えます。 setTimeout(() => { console.log(`${2 ** 5
Implementing Promisable setTimeout - Dmitry Kudryavtsev
In a world controlled by the event loop, setTimeout is the king of execution control. It allows you to schedule function calls to be executed later. However, it can’t do one thing - suspend the execution for a certain amount of time. Think of an equivalent to sleep(ms) from different languages. Let us now explore how we can implement it. Promisifying setTimeout In order to make setTimeout behave s
処理を遅延させたい、3秒ごとに処理を繰り返したい、というとき、JavaScriptでは以下のような関数を使用します。 setTimeout関数 ・・・ 指定した時間経過後に処理を実行する setInterval関数 ・・・ 指定した時間ごとに処理を実行する また、それぞれタイマーを停止するための関数も用意されています。 clearTimeout関数 ・・・ setTimeoutで設定したタイマーを取り消す clearInterval関数 ・・・ setIntervalで設定したタイマーを取り消す setTimeout関数 clearTimeout関数 指定した時間経過後に処理を実行します。 var log = function(){ console.log("test"); }; setTimeout(log, 3000); // 3秒後に"test"と表示されます
JavaScriptのsetTimeoutとsetIntervalを理解しマスターする - TECH PLAY Magazine
JavaScriptのタイマー機能の使い方として、関数setTimeoutとsetIntervalについて解説している記事です。setTimeoutやsetIntervalをどんな用途で使うとよいかの紹介もあります。それぞれの関数の引数にどんな意味があるかも解説します。 WEBページの動作をもっと魅力的にしたり、便利にしたりするのに、JavaScriptのいろんな機能が役立っています。ブラウザーなどで、ページが表示されてから一定時間後に表示を変更したり、ページを遷移させたいというときには、setTimeoutとsetIntervalという関数を使い分けて、実現できます。 この記事では、タイマー機能の使い方を解説します。 JavascriptのsetTimeoutはタイマー機能 タイマーで処理を実行するタイミングを制御 setTimeout関数は、関数が実行されてから関数内で指定した時間の分
発端 こちらの記事を読んだとき、未知との遭遇でよく分からなかったのだが、調べるとクソ重い処理をUIがフリーズしない程度にちょくちょく実行する方法としてsetTimeout(fn, 0)というものがある。ということを知った。 そして、setTimeout(fn, 0)は遅いらしいので他のアルゴリズムと比較したいと思った。 比較 1から100000までの和を求めてもらう。 おわかりいただけただろうか。 比較に使わせていただいたアルゴリズム Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do w
[React] 副作用フックを使用してsetTimeoutのタイマーをリセットする | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、Reactアプリケーションで、副作用フック（useEffect）を使用してsetTimeoutのタイマーをリセットしてみました。 デモ 上記のサンドボックスを開いてから10秒経過後のコンソール出力。 TimerID 15 has started. 10 seconds has passed. TimerID 15 has finished. 続けてRestartボタンをクリックして10秒経過後のコンソール出力。 Restart button was clicked. TimerID 15 was canceled. TimerID 197 has started. 10 seconds has passed. TimerID 197 has finished. コード概要 src/App.tsx import React, { u
![[React] 副作用フックを使用してsetTimeoutのタイマーをリセットする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
setTimeout を完璧に理解する
setTimeout の真の力、あなたは知っていますか？ - Qiita
awaitできるsetTimeoutを1行で書く方法 - Qiita
スケジューリング: setTimeout と setInterval
setTimeoutに大きい数値を与えるとどうなる？ 仕様を読んで完全理解 - uhyo/blog
JavaScriptのタイマー処理 setIntervalとsetTimeout - Qiita
【JavaScript】setTimeout(fn, 0)が遅さが分かるサイト - Qiita
www.aps-web.jp
www.nikkei.com
blog.livedoor.jp/reer121
www.pixiv.net
www.sbu25.com
www.pixiv.net