JavaScriptの非同期処理をじっくり理解する (4) AbortSignal, Event, Async Context
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 中止処理 並行処理ではしばしば実行中の処理を中止したい場合があります。 古典的なキャンセル処理 Webブラウザ/Node.jsともに、 setTimeout の中止が可能です。 const timeout = setTimeo
addEventListener の第3引数が拡張されてるという話 - Qiita
Webアプリケーションのお話です。 イベントハンドラを登録する addEventListener メソッドの引数は以下の形で覚えている人が大半だと思う。 element.addEventListener('click', myClickHandler, useCapture); 参考記事 EventListenerOptions これまでの第3引数 useCapture は boolean 型をとり、イベントハンドラがキャプチャフェーズ or バブリングフェーズのどちらで処理されるかを制御するものだった。 この第3引数が Object 型も受け付けるようになり、現状、それぞれ boolean 型で once , passive , capture パラメータをとる。 once true でイベントハンドラが1度だけ処理される。 例えば Window の load イベントハンドラは通常1度
Mutation Event から Mutation Observers へ | Web標準Blog | ミツエーリンクス
“Detect DOM changes with Mutation Observers” で紹介されているように、DOM4 では Mutation Observers という新しいインタフェイス群が定義されました。これらを用いると、DOM2 Events で定義された Mutation Event を置きかえることができます。 Mutation Event は数々の問題点を抱えていることが明らかになっています（策定中の DOM3 Events では該当箇所に警告文が記述されているほどです）。例えばパフォーマンスに関わる問題があります。Mutation Event では子ノードだけでなく、すべての子孫ノードからイベントが発送されます。よって、子孫ノード数が多く、ルートノードに近いノードでは、場合にもよりますが膨大な数のイベントを拾ってしまいがちになります。それらをいちいちイベントリスナ内でチ
IE8とIE9pp の非互換性(event) - latest log
IE9正式版ではなく IE9pp(IE9 Platform Preview) や IE9pp2 の現状について記載しています。 IE9ppがDOMの仕様に合わせたため、IE8までとは互換性がなくなっている部分をちょこちょこ書いていきます。 IE9pp の event イベントハンドラが受け取る event オブジェクトは DOM Level3 Event の仕様に従うようになりました。 IE9pp では event.button の値が変化 event.button の値が 0(left click), 1(mid click), 2(right click) になりました。 IE8 までは各ボタンの同時押しを判定できたため、どのボタンが押されているかはビットアンドで比較する必要がありました。 event.button & 0x1 が true なら left click event.bu
メモリーリークパターンを理解する - babu_babu_babooのゴミ箱
メモリーリークに関する覚え書き メモリーリークとは コンピュータの動作中に、使用可能なメモリ容量が、だんだん減っていく現象。 OSやアプリケーションソフトが、処理のために占有したメモリ領域を、解放しないまま放置してしまうために起きる。 メモリーリークパターン（以下のタイプを考察） ドキュメントツリーに属さないノードに、イベントを貼り付けた場合。 DOM プロセッサが管理しているオブジェクトと、スクリプトエンジンが管理しているオブジェクト、が混在した場合 いわゆるクロージャが、その混在を招くパターン（これが難解） メモリーリークに該当しないもの DOM プロセッサが管理している変数が、グローバル変数である window, document は、グローバル変数なので、該当しない。 ドキュメントツリーに属さないノードに、イベントを貼り付けた場合 ページを破棄するときに、ドキュメントツリーのノード
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Binding Events To Non-DOM Objects With jQuery
Yesterday, Dan G. Switzer, II was giving me some really great jQuery tips. Among the things that we discussed was the ability to define an anonymous function and then call it immediately: This is not jQuery specific, but the benefits of doing this is that you can create a totally private memory space in which to execute your anonymous function. In this memory space, locally declared variables won'
結構前から収集していた海外エントリから面白いcustom eventの使い方を紹介 - monjudoh’s diary
jQueryでは非DOMオブジェクトにもeventをbind/triggerできる Binding Events To Non-DOM Objects With jQuery この例だとwindow.location.hrefが変化しているかどうかTimerで監視し続け、 変化したタイミングで$( window.location ).trigger('change',data);で変更前後の情報を通知している。 なので、$( window.location ).bind('change',function(ev,data){});で通知を受け取る事ができる。 hashで状態を管理しているAjaxアプリで有効そうなテクニック。 select boxでcustom eventを活用 http://trulyevil.com/2009/05/07/custom-events-in-jquery/
eventのグローバル通知 - monjudoh’s diary
jQuery.event.trigger(eventType); で、やる。若手ITゾンビで読んだ。 主な用途はDOM要素に紐づかないcustom eventの通知用(例：ajaxSend)と思われる。 (全DOM要素への通知って用途はあるのかな?) 実行すると、jQuery.cacheに入っている全てのオブジェクト(DOM要素に限らない)に対して、このeventを通知する。 なので、Ajax中にページ更新する際の注意点 - to-RのtipsでajaxSendをbindする対象はbodyでなくても良い。 ただし、jQuery.event.global[eventType]がtrueの場合(一度でもこのeventTypeのeventをbindしたことがある場合)のみ、この処理は行われる。 なので、例えばajaxSendを一度もbindしていなければ全cacheを舐めるような処理は行われない
Event Driven JavaScript - os0x.blog
document.createEventとdispatchEvent、addEventListenerを使ってイベントドリブンに書いたJavaScriptがオレブーム(ただし、IE非対応*1 )なので、軽く紹介してみたいと思います。 具体的には、AutoPatchWork (Google Chrome Dev用のextension)をイベントドリブンで実装しています。 AutoPatchWork.jsが2009/06/11 21:00時点のソース(id:nanto_viのコメントをうけて#を.に変更済み)。シンプルさを重視しているので、324行と短めです(CSSは別ファイルですが)。 window.addEventListener('scroll', check_scroll, false); window.addEventListener('AutoPatchWork.request',
キャプチャリングとバブリング Firefox編 - monjudoh’s diary
サイ本の17.2に詳しく書いてありますが、JavaScriptのDOM レベル2イベントでは、 イベント伝播は3つの段階で構成されます。 キャプチャリングフェーズ ターゲットノード自身でのイベントハンドラの実行 バブリングフェーズ 上図のように3つ入れ子になった要素の、 外側から2つ目の要素をクリックした場合を例にとると、 キャプチャリングフェーズでdocument→外側の要素→と伝播していき、 ターゲットノードでのイベントハンドラ(あれば)が実行され、 バブリングフェーズで→外側の要素→documentと伝播していきます。 DOMレベル0のイベントではターゲットノードでしか イベントハンドラの実行は出来ませんが、 DOMレベル2イベントではキャプチャリングフェーズ・バブリングフェーズでも イベントハンドラの実行が出来ます。 検証用HTML 確認のためにdivの親子をそれぞれクリックして、
ブラウザの閉じるボタン制御したいんだけどとかいう話 - hagino3000's blog
友人から質問があったので、一応携帯メールで返信したけどこういう事ですかね? jQuery使ってます。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>unload test</title> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <script> $(window).bind('beforeunload', function(e){ if(context.editing){ // データ編集中だけメッセージを出す return e.originalEvent.returnValue = "終了したりしますけどいいですか??"; } }); $(window
JavaScript Reference β addEventListener()
[M] [WIN][IE6/7×][FF1.5○][NN7.1○][OPERA8.5○] [Mac][Safari2.0○][FF1.5○][NN7.1○][OPERA8.5○] 【書式】 [1].addEventListener([2],[3],[4]) [1]……イベントを設定するオブジェクト [2]……イベント（click、mouseoverなど） [3]……呼び出す関数 [4]……イベントのキャプチャの有無（true/false） 【例】 document.getElementById("myBtn1").addEventListener("click",myJump, false); id名myBtn1のボタンにクリックしたらmyJump関数を呼び出すように設定する。 【解説】 要素にイベントを設定します。第一引数にclick、mouseoverなどのイベントを指定し、第二引数に
)
JavaScript addEventListener() - とみぞーノート
仕様書を読んでもわかりにくい、addEventListener()の第3引数useCaptureの意味についてのメモ。 addEventListener()はIEでは未実装なので関係なし。 以下はFireFoxで確認。 useCaptureの意味 通常登録したイベントハンドラ(*1)はイベント伝搬のバブリングフェーズで呼ばれる。このため、DOM Treeの下の方のエレメントからイベントハンドラが順番に呼ばれる。 useCaptureをtrueにしてイベントハンドラを登録すると、キャプチャフェーズでイベントハンドラが呼ばれるようになる。このため、その他のイベントハンドラに先だって呼び出されるようになる。 (*1) 以下のものが含まれる。 DOMエレメントのプロパティに設定したイベントハンドラ(element.onmousedown = handler) HTMLタグに埋め込んだイベントハンド
handleEvent、addEventListener - 素人がプログラミングを勉強していたブログ
addEventListenerの第二引数は、関数以外にも、handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。 window.addEventListener("click", { handleEvent: function (e) { console.log(e); } }, false); また、この仕様を利用すると、 ({ run: function () { window.addEventListener("click", this, false); this.counter = 0; }, handleEvent: function () { this.counter++ if (this.counter < 3) alert(this.counter + "clicked!"); else this.destroy(); }, destroy: fun
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript][備忘録]イベントまわりの備忘録 - rokujyouhitomaのぷろぐらま日誌