【脱初心者】 throttle / debounceとは？ jQueryでresizeやscrollの処理負担を軽減する
2020/08/27 (更新日: 2021/02/27) 【脱初心者】 throttle / debounceとは？ jQueryでresizeやscrollの処理負担を軽減する JavaScript jQuery PROGRAMMING 本記事では、throttle / debounceの説明・使い方を解説します。 throttle / debounce処理は、間引き処理であり処理を軽くすることができます。 例えばscrollやresizeイベントの処理でthrottle / debounceを使うと大きく処理の軽減ができるため、通常これらのイベント処理ではthrottle / debounceを使うことがほぼ常識となっています。 この記事を書いている僕は、フリーランスのフロントエンドのプログラマーとして、これまで３年以上のWeb制作経験があり、HTMLやCSSのマークアップからJava
HTMLのselectのoptionに，複数行や改行を許可する方法 - モバイル通信とIT技術をコツコツ勉強するブログ
オプションに複数行の内容を表示できるようなリストボックス（ドロップダウン）は， jQueryのプラグインで実現可能。 HTMLかJSで質問です。 JSのオープンソースでも良いので、select.. http://q.hatena.ne.jp/1382703795 javascript - How can I build a select with multiline option? - Stack Overflow http://stackoverflow.com/questions/15... Selectmenu · fnagel/jquery-ui Wiki · GitHub https://github.com/fnagel/jquery-ui/w... 動作デモページ http://jsfiddle.net/fnagel/GXtpC/embe... このライブラリは選択肢を上下キ
jQueryの「$」やセレクタなどをサポート、jQueryの代替として利用できる超軽量スクリプト -Selector
jQueryは確かに便利ですが、すべての機能が必要かと言われれば、そうではない人が多いと思います。 「$」やセレクタなど、jQueryの機能をサポートしたjQueryの代替として利用できる超軽量スクリプトを紹介します。 Selector -GitHub 最新のjQueryのファイルサイズは、下記の通り。 jquery-3.2.1.js 270 KB jquery-3.2.1.min.js 90 KB そして、Selectorのファイルサイズは、1/4以下！ selector.js 65 KB selector.min.js 17 KB もちろん、jQueryの機能すべてが利用できるのではなく、オブジェクトやセレクタや関数に限られています。 サポートされているjQueryの機能 サポートされているjQueryオブジェクト $ サポートされているjQueryセレクタ add addClass
[jQuery] scroll や resize イベント時の処理回数を減らすプラグイン – jQuery throttle / debounce
scroll や resize イベント時は、そのイベント発生中ずっと何らかの処理が行われます。特にモバイル端末の場合、処理によってはブラウザへの負担が心配です。jQuery throttle/debounce プラグインを使用するとイベント中の処理回数を減らすことができます。jQuery throttle/debounce プラグインの使い方などをまとめました。 なにをしてくれるのか throttle/debounce プラグインではイベント中の処理を、「イベント発生中に随時実行」ではなく「イベント発生中、指定した秒数毎に実行」（throttle）又は、「イベントが終了してから、指定秒数後に実行」（debounce）というタイミングに変更することができます。 「サンプル」も作りました。 参考とダウンロード 以下ページで使い方などの説明があります。「Download」よりプラグインを入手で
![[jQuery] scroll や resize イベント時の処理回数を減らすプラグイン – jQuery throttle / debounce](https://cdn-ak-scissors.b.st-hatena.com/image/square/272f53ef16ea86c5a797e939c63e3c6113c9bd4c/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F09%2FjQueryicon.png)
jQueryを使わない書き方 ajax, each, trigger, on/off, extend, deferred, animate, css編
昨年くらいから次世代JavaScript（ES2015 & 2016）やReactやAngularJSなどのフレームワークの普及により脱jQueryの動きが見られ始めました。そして2016年はさらに脱jQueryの動きが加速するのではないかと見ています。その最も大きな要因として1月12日に実行されたマイクロソフトによる旧IE（Internet Explorer 8, 9 ,10）のサポート終了が挙げられます。そんな訳でjQueryは便利ですが、特に使う必要もなくなってきているのが現状です。今回紹介するjQueryに頼りがちな処理をJSで書けるようにさえなれば、脱jQueryはすぐにでもできるのではないかと思っています。ぜひ参考にしてください。 はじめに脱jQueryに関して以下のような記事が年末に投稿されました。 You-Dont-Need-jQuery – jQueryを使わない書き方教
jQuery.ajaxの代わりにSuperAgentを使う - Qiita
脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 superagentの良さ かわいい。 ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest scriptタグでsuperag
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験｜BLACKFLAG
最近ではWebサイトを構築する際にレスポンシブ対応として、PCでの表示のみならずスマートフォンやタブレットでの表示を考慮して構成する必要があります。 レスポンシブ対応でレイアウトに関してはCSSのMediaQueriesを使ったりすることで、ウィンドウサイズによって画面上のレイアウトを調整させたりすることが可能ですが、大きな画像を使用する画面デザインなどの場合ではスマートフォンで表示する際のレンダリング負荷が問題になったりします。 そんな際に使えるようにMediaQueriesと同様の方法で、ウィンドウサイズによって読み込む画像を切り替える動作をjQueryを使って実験的に作ってみたので紹介してみます。 【2016/05/22】 ウィンドウサイズを取得して画像を切り替える部分のスクリプト動作を一部改修しました。 ウィンドウサイズによって切り替える画像については、PCで表示させる為の大きな画
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
jQueryは有害なのか | POSTD
ずっと「～は有害なのか」という記事を書いてみたかったんです ^(1) 。 まず本題に入る前に、1つ言わせてください。 jQueryはWeb業界の発展に大いに役立った と私は考えています。jQueryがあることで、開発者はこれまで想像もできなかったことをできるようになりましたし、そういった機能をブラウザの製作者がネイティブに実装するきっかけにもなりました（もしjQueryが開発されていなければ、今でもdocument.querySelectorAllは存在していなかったでしょう）。jQueryは、今ある便利なツールを使うことができなかったり、IE8やそれ以下の過去の遺産をサポートしなければならない際に今でも必要になってきます。 しかし、そのようなケースはもはや稀なものとなりました。Web開発者の大半は、マーケットシェアの縮小した古いブラウザをサポートする必要はありません。更に、忘れてはならな
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.jqueryhelp.net/