JavaScriptでonclickなどのevent処理を高速に処理させる簡単な方法

公開日: : javascript

どもです、manji6です。

node.jsみたいなサーバー側言語を触りたいなと思いつつ、ほとんどInterface系のJavaScript
しか触っていないのですが・・・

最近WebInterface系の実装をしていてサイ本を読み返してたらわかったことです。
「知ってるよボケ!」って言うJavaScriptマスターな方々には常識的な内容です。

JavaScriptでイベント定義をすると思うんですが、「そのイベント処理自体が重い」事ってありません?
例えば、ある要素を変更すると非同期通信をして、その戻り値を描画するみたいな。
分かりやすい事例で行くと、セレクトボックスの変更時に処理するとかですね。

JavaScriptでonclickなどのevent処理を高速に処理させる簡単な方法 sample1 – jsdo.it – share JavaScript, HTML5 and CSS

こういうのを実際に書いてみると分かるんですが、非同期通信が帰ってくるまでブラウザ自身の処理が
もたつく場合があります。特にこのセレクトボックスが曲者で「閉じる処理」が固まるんですね。
特にIE系のブラウザで顕著に発生します。

原理は簡単で、ClickやChangeイベントで定義した処理はブラウザ自身の処理よりも先に動きます。
そのイベント定義された処理が「完了」しないとブラウザ自身の処理は進まないということですね。

でも「ブラウザ自身の処理は先にやっていいからこっちが書いたJavaScript処理は先にやってよ!」
という場合は多々あると思います。例にあげたものもそうですが、別にセレクトボックスを閉じ
たりする処理をブロックする必要はなく、非同期通信の結果まで待つ必要はないです。

そういう場合は、「setTimeout()」を使うことで解決できます!

setTimeout()は指定した時間後に指定した関数を呼び出すタイマーとして使うのが定石ですが、
もう一つ重要な利点として「setTimeout()内で指定した関数は、必ず呼び出された処理が終わ
ってから実行されることが保証される」というところにあります。
まさに今回の事例ぴったりですね。

ということで改良したのがこちら。

forked: JavaScriptでonclickなどのevent処理を高速に処理させる簡単な方法 sample2 – jsdo.it – share JavaScript, HTML5 and CSS

何が違うって、change()内の処理全体をsetTimeout()の無名関数で括っただけです。
10msという微小数値をしておけばそこまで処理タイマーとしての所は無いと
思いますので、大丈夫かと。

気をつけなければいけないのはsetTimeout()の引数として渡す関数内におけるthisは
グローバル名前空間になってしまう所。うまく値をクロージャーで渡すなどして
おけば問題ありません。

関連記事

JavaScript難題:userAgentだけでMacOSのバージョンを引っこ抜くチャレンジ

JavaScript環境で、navigator.userAgentを見てMacOSのバージョンだけを

記事を読む

JavaScriptの読み込み高速化方法についてまとめてみた

今日はJavaScriptの読み込み高速化手法についていろいろと調べていたのでまとめておきたいと思い

記事を読む

no image

javascriptで配列やオブジェクトを操作する「比較的」高速で簡単で効率的な方法まとめ

javascript書いていますかー!?私はガリガリ書いています。 大規模Javascript

記事を読む

Comment

  1. Masato より:

    If you wrote an article about life we’d all reach entemhlengint.

  2. Now that’s subtle! Great to hear from you.

  3. Ya learn something new everyday. It’s true I guess!

  4. 01/02/2000 tarihinde işe başladım.3330 gün primim bulunmaktadır .01/01/1971 doğumluyum yaştan emekli olabailmek için kaç sene daha çalışmam gerekir ve kaç yaşında emekli olurum

  5. At the height of the most recent English rickets epidemic bakers were adding talc to bread as a whitener. There's a claim that that increases vitamin D deficiency (besides being a bad idea generally). Which would exaggerate the negative economic effects of the British empire.

  6. Estella より:

    Hey! This is my first visit to your blog! We are a collection of volunteers and starting a new project in a community in the same niche. Your blog provided us valuable intoamrfion to work on. You have done a marvellous job!

  7. Really trustworthy blog. Please keep updating with great posts like this one. I have booked marked your site and am about to email it to a few friends of mine that I know would enjoy reading..

  8. Thanks for inviting us to the Back-To-School Resource Fair. We provided information about our yahoo group – Twice Exceptional/ “2E” Network LA, and our craft activity, Wind Socks, was very popular. We had a fun and very successful day at the Fair!

Message

メールアドレスが公開されることはありません。

Target:mbox

自腹で購入した商品色々レビュー中!

商品紹介・レビュー記事特集!

Target:static mbox(mbox create

no image
Nintendo Switch で使える激安USB 3.0ケーブル

Nintendo Switchを買いました!とりあえず色々まずはやって

AMPで作ったページを実際にGoogle検索結果経由でみた時と同じキャッシュ表示にする方法

今日は技術的な話。AMPページ対応を行った人も最近増えてきたと思うので

分散投資ロボアドバイザーのTHEOを大体半年間回したら利率10%近くまでになったので、トランプさんありがとうと思った

(こちらの記事は私が独自に当サービスを使ってみた結果の報告です。特にT

Macでの作業効率アップ!nativefierを使ってWebアプリをアプリケーション化

Console heaven / bartosz.maciejew

no image
2016年の目標

新年明けましておめでとうございます。 年末年始は色々とバタバタしまし

→もっと見る

PAGE TOP ↑