Knockout.js 日本語ドキュメントの
"visible" バインディングによると、
HTMLのstyle属性でdisplay: none
を設定しているだけらしいので同期的な処理に思われます。
GitHubのリポジトリに全ソースコードが上がってるようなので、落として全文検索していけば見つかると思います。
表示する時間は0.001秒としたい。
パソコンやディスプレイ、人間の構造上のスペックの問題で不可能です。
結論はsetTimeoutじゃなくてrequestAnimationFrame使えなんですがその理由を説明していきます。
そもそも0.001秒という数字が出る時点で、今から解説する内容は一部既知であっても何故関係あるかの紐づけまで至ってないと思うので、根本から解説していきます。
まず機械の話をしていきます。
映像を表示するのは光ですが、映画館の映写機のようなもので似たような画像を1秒間に何十回もの間隔でカシャカシャ切り替えて実現しています。
機械版のパラパラ漫画ですね。
パソコンのディスプレイの主流は液晶ディスプレイですが、映写機と同じく「即興のフィルムを作ってカシャカシャ切り替える」事を実現する為の装置です。
このカシャカシャは一般的にフレームと呼ばれ、カシャカシャタイミングがフレームレートと呼ばれています。
格闘ゲームの波動拳は全体40フレーム(40f/60秒=0.67秒)みたいな感じで親しまれています。
このフレームレートですが、一般的にテレビ放送は秒間30フレーム、ゲームやパソコン等の能動的な操作を伴うものは秒間60フレームがベースになります。
秒間60フレームのルールは多くの場所で採用されており、例えば多くの液晶ディスプレイのリフレッシュレート(更新間隔)は60Hz(秒間60回書き換え)ですし、
Chromeを始めとする多くのブラウザのフレームレートは60FPS(秒間60回書き換え)です。
この秒間60回書き換えをミリ秒に換算すると、16.67msのタイミングで1度書き換える計算となります。
つまり、0.001秒という一瞬だけ表示させようとした場合、液晶ディスプレイやChromeの画面更新間隔は約0.017秒ですので、16/17の確率で何も表示されないことになります。
また、JavaScriptのsetTimeoutの仕様の問題もあります。
そもそもイベントとして登録された関数は条件を満たした時にフラグが立つだけで、実際に実行されるのは次回のイベントループで回ってきたタイミングであり、若干のタイムラグが発生します。
setTimeoutに関してもブラウザ毎に最小値が異なるようで、10ms以下を設定しても意味が無いケースが多いようです。
また、人間の一瞬に関しても定義が必要です。
人間の脳はアスリートクラスでも認知するまでに0.1秒が必要で、そこから行動速度で競う形になります。
参考サイト: https://games.yahoo.co.jp/qa/detail?qid=13115770323
従って、0.001秒にこだわる必要は一切なく、100msくらい表示してから逃げれば人の脳は目にも止まらない一瞬の速度で消えたと判断することでしょう。
フレーム数でいえば6〜7Fで、その程度を目安にしてやれば十分といえます。
とはいえ、0.001秒としたと言うことは出来るだけ小さい時間だけ表示させたいという技術的挑戦だと思いますので、
requestAnimationFrameを紹介して締めます。
Chromeなどのブラウザは約60FPSで駆動しているらしいのですが、常にではなく負荷を検知して勝手に30FPSに落としたり、バックグラウンド動作させた場合は勝手に1FPSに落としたりするようです。
つまり、何時画面が更新するかは誰にもわかりません。
JSはゲームやアニメーションにも使われる言語ですから、画面の更新タイミングがわからずアニメーションがカクカクしては意味がないわけですね。
その問題への回答としてrequestAnimationFrameが用意されています。
Chromeの画面更新が終わったと同時にこれで登録したイベントが確実に発火しますので、
次の更新までに終わるような処理を組み込む事で確実に等間隔で描画することが可能です。
1フレーム目で削除する事で最速で消すという事も実現出来るでしょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/05 13:52 編集
2018/09/05 16:14
2018/09/06 03:38
2018/09/06 12:50