タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
大雑把な理解としては問題ないですが、実は setTimeout の隠された能力はそれだけではありません。 setTimeout の隠された能力を知るとどんな良いことがあるのでしょうか？ 例えば、次のような良いことがあります。 ブラウザに対する理解が深まる Web サイトのパフォーマンスを向上させることができる ドヤれる まず、 ブラウザに対する理解が深まります 。 かのアリストテレスはこう言い残しました。 Knowing setTimeout is the beginning of all wisdom. ( setTimeout を知ることは、すべての知恵の始まりである) setTimeout を知ることは（ブラウザの）すべての知恵のはじまり と言って過言ではありません。 普段なにげなく setTimeout を使っていても、「実はブラウザは裏でこんなことしているんだー」という新しい知見
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
JavaScriptではsetTimeoutという関数を使うことができます。 しかし、実はこの関数は言語仕様（ECMAScript）に組み込まれているものではありません。 ブラウザ上で動くJavaScriptの場合、setTimeoutはHTMLの仕様によって定義されています。 このHTMLの仕様はHTMLとは名ばかりの巨大な仕様で、今時のブラウザの挙動をほぼ全て規定しているといっても過言ではありません。 さて、setTimeoutにとても大きな数値を渡したときの挙動に関するツイートをTwitterで見かけました。 曰く、setTimeoutに渡す数値は32ビット整数しかサポートされていないというのです。 試してみると、次のようなものは確かに一瞬でタイマーが呼ばれてしまい、想定した挙動とは違うように思えます。 setTimeout(() => { console.log(`${2 ** 5
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
JavaScriptではsetTimeoutという関数を使うことができます。 しかし、実はこの関数は言語仕様（ECMAScript）に組み込まれているものではありません。 ブラウザ上で動くJavaScriptの場合、setTimeoutはHTMLの仕様によって定義されています。 このHTMLの仕様はHTMLとは名ばかりの巨大な仕様で、今時のブラウザの挙動をほぼ全て規定しているといっても過言ではありません。 さて、setTimeoutにとても大きな数値を渡したときの挙動に関するツイートをTwitterで見かけました。 曰く、setTimeoutに渡す数値は32ビット整数しかサポートされていないというのです。 試してみると、次のようなものは確かに一瞬でタイマーが呼ばれてしまい、想定した挙動とは違うように思えます。 setTimeout(() => { console.log(`${2 ** 5
【JavaScript】setTimeoutから返るIDは絶対0じゃないし、clearTimeoutに0を渡しても何もしない - Qiita
【JavaScript】setTimeoutから返るIDは絶対0じゃないし、clearTimeoutに0を渡しても何もしないJavaScriptsetTimeoutsetInterval 超小ネタです。JavaScriptのタイマー系関数にsetTimeoutとsetIntervalがあります。これらは返り値として数値型のタイマーIDを返し、このタイマーIDをclearTimeout及びclearIntervalに渡すことでタイマーをキャンセルできます。 このタイマーIDは0よりも大きいことが保証されています。またclearTimeoutまたはclearIntervalに無効なタイマーIDを渡しても何もしないことも保証されています。（以下参照） なのでタイマーを使っていないときはタイマーIDに0を代入しておけば、clearTimeoutを使うときに毎回タイマーを起動しているかをチェックする
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
[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. コード概要 import React, { useState, use
![[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
setTimeoutに大きい数値を与えるとどうなる？ 仕様を読んで完全理解 - uhyo/blog
Implementing Promisable setTimeout - Dmitry Kudryavtsev
setTimeoutに大きい数値を与えるとどうなる？ 仕様を読んで完全理解 - uhyo/blog
【JavaScript】setTimeout(fn, 0)の遅さが分かるサイト - Qiita
news.yahoo.co.jp
indepa.net
www.smartnews.com
www.mensnonno.jp
share.google
www.smartnews.com