ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結

gistfile1.js ���O V \�O V /** * [begin,　end)の範囲で非同期的な繰り返し処理を行う * * @param {Object} options ループの設定 * begin, end: 範囲指定 * inc: まとめて実行する量 * duration: ループごとに間をあける時間[ms] * * @return {jQuery.Deferred} * progress: 非同期処理を行う部分 * progress_func( index, deferred ) * done: ループ正常終了時のコールバック設定 * fail: ループを途中で抜けたときのコールバック設定 */ function async_loop( options ) { var deferred = jQuery.Deferred( ); var index = options.b

jQuery deferredの使い方 前編 deferredの基本 jQuery deferredをなんとなく知っているが使い方がよくわからない人のために短期シリーズでおさらいをします。第1回目は非同期処理の概念からdeferredの基本機能までをおさえます。 なぜ、今、jQuery deferred？ この短期シリーズでは、2回に分けてjQuery deferredについて解説します。 jQuery deferredは、jQuery1.5で追加された機能であり、特に新しいものではありません。 しかしながら、私が昔書いたjQuery deferredに関するブログ記事をブックマークする人が、いまだにちょこちょこいるのが見受けられるのです。 もしかして、deferredの存在はなんとなく知っているけれど、どのように使ったらいいのかよくわからないという人が多いのかもしれないと思い、改めてまと

javascriptで実行待ちの場合、setTimeout使えばいいんですがいちいちコールバック関数として引き渡してやる必要があるのでたとえば2秒待った後に1秒待つ、といったように実装する際、コールバックがネストし、見ていてやるせないコードになります。 (そんな設計するのがそもそも悪いってのもあるかもしれませんが) 例えばこんな感じ。 setTimeout(function(){ // 2000ms 待った後に実行されるコールバック setTimeout(function(){ // 1000ms 待った後に実行されるコールバック // その何秒後かにまた実行するコードを書くとさらにネストが下がっていく... },1000); },2000); ネストが2個とかそこらならまだ許容範囲かもしれませんが、 どうせならJQuery.Deferredを使ってネストをあまり下げないように書いてしまい

ダイアログのタイトルだとか内容のテキストだとかを 設定してからオープンさせたい場合、jqueryとかでidを強引に書き換えてやれば いいのだが、それだと密結合な感じになってしまうので、イベントを駆使していろいろ頑張ってみた。 まず、ダイアログ側、こんな感じでdivタグがかかれている。 <div class="modal hide" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <span id="modalHead">Modal header</span> </div> <div class="modal-body"> <span id="modalBody">One fine body</span> </div> <div class="modal-footer">

サマリー １．jQuery.BlockUIとは ２．使い方 ３．画面がready状態になる前に表示させたい場合 ４．使用してみた感想 photo credit: Arttu Ekholm via photopin cc １．jQuery.BlockUIとは Webアプリにおいて、時間のかかる処理中や重い画面を開くときなどに「お待ちください」「Please Wait...」「Now Loading...」などと表示させ、ユーザーが画面を触われない）状態にすることは、大切なUI設計の一つである。 これを簡単に実装する方法の一つにjQuery.BlockUI.jsというjQueryプラグインがある。 これを使うと簡単に画面全体を半透明のレイヤーでブロックすることができる。 ２．使い方 （１）ダウンロード http://malsup.com/jquery/block/ （２）headでjQuery

はじめに 簡単にJSONまたはJSONPを読み込みたい場合は以前の記事を参照。 1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法 type 主にGETかPOSTを指定。受け取るときはGET、送信するときはPOST。 url 読み込み先または送信先のURLを指定。例えばJSONを読み込みたいときは以下のようになる。 $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json' }); $.ajaxのurlオプションを使用したサンプル cache キャッシュの有無をtrueかfalseで指定。注意しなければいけないのはJSONの場合はデフォルトでcache:true、JSONPの場合はcache:falseとなっている点だ。つまりJSONをキャッシュをしたくない場合はcache:falseを指定しなければならな

属性とはhtmlでいうと要素で設定しているいろいろな値、 例えば：<a href="index.html"></a> 属性：href、属性値：index.html、要素：a 属性を変更できると、画像を入れ替えたり、urlを変更したり、大きさを変えたり、ホームページでの表現の幅が広がります。 attr 属性値を変更する場合 $("セレクタ").attr("変更したい属性の名前","変更後の属性値"); 例えば、 属性srcをa.jpg→b.jpgに変更する場合。 jquery $("img").attr("src","b.jpg"); html 変更前：<img src="a.jpg"> 変更後：<img src="b.jpg"> さらにたくさんの属性を変更したい時 $("セレクタ").attr({"属性名":"変更後の属性値","属性名2":"変更後の属性値"}); が使えます。 例えば、

ScrollbarのDesignを変更する方法. CSSだけで出来るかと思ったらJavaScriptで実現した方がBrowser間の差異がなくていいみたい。 参考にしたSiteは下記 10 jQuery Custom Scrollbar Plugins jScrollbarが良さそうだったけど、jQuery UIが必要だったので、 jQueryとjquery-mousewheel だけで動く、jScrollPaneを使うことにした。 Wordpressで動かすためのSample. 必要なFileをfunctions.phpなどで設定 $base_url = get_template_directory_uri(); wp_enqueue_script('jquery', $base_url . '/js/jquery.js', null, '1.6.4'); wp_enqueue_scri

Twitter Bootstrap使ってるとどうもjQuery UIのカレンダーのデザインが気に食わなくて、bootstrap-datepickerを使う人が多い気がします。jQuery UIは機能が凄いからいいけどね。 で、データピッカーなんですが、ちょっとソースがいろいろあって混乱してしまうので整理します。 Stefan Petre http://www.eyecon.ro/bootstrap-datepicker/ ↓ vitalets https://github.com/vitalets/bootstrap-datepicker ↓ eternicode https://github.com/eternicode/bootstrap-datepicker 多分こんな流れです。 eternicodeのオンラインデモは分かりやすくていい。 期間を指定させる 単一の日付けではなくて、○