setTimeoutはダサいぞ。JavaScript Promiseを使って処理を順番に実行しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか？ 以下のように setTimeout() を使って実現しているでしょうか？ function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか？ animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので
[JavaScript] 非同期処理のコールバック地獄から抜け出す方法 - Qiita
JavaScript (Node.js) で開発する上で避けては通れない 非同期処理、コールバックについて考えてみたい。 自分なりのお勧めの方式を書いてみた。 いろいろなものを試した結果である。 ※この記事でのお勧めの方法は ES2015 (ES6) で実装された generators (yield) の技術を使用しています。 実はまだ Babel(6to5) 等を利用するか Node.js v4～v8 でしか 実質的に使用できない技術だと思います。悪しからず。 (早く全てのブラウザに広く普及する事を祈っています) まだブラウザでは独自ライブラリか Promise (Deferred) 等を使っています。 ※2015/10/15: 記事の内容を npm aa (async-await) に対応させました。 ※2015/04/19: 記事の内容を npm co@4 に対応させました。 ※20
![[JavaScript] 非同期処理のコールバック地獄から抜け出す方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f663d25f2912af4849a690fcc94d049628ce353c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTYxMjglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODE3Nzg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjAwMGE5MTAzMzIyMDk0M2M3ZjQ3NjQ3OTEyM2VmNjM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D675f62b48b0f92263d3cf310a1ce071a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOSU5RCU5RSVFNSU5MCU4QyVFNiU5QyU5RiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBRSVFMyU4MiVCMyVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVBRiVFNSU5QyVCMCVFNyU4RCU4NCVFMyU4MSU4QiVFMyU4MiU4OSVFNiU4QSU5QyVFMyU4MSU5MSVFNSU4NyVCQSVFMyU4MSU5OSVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTg5MjM0YTRkYmUwOWZlMGEyNDhlODIwNjkwNTRkNjgy%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBMaWdodFNwZWVkQyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWFjN2FmMTI0YjNkN2I4NWFjZjAxZjNmODNkMDJiZTE1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D3ec0d914b8688b86a6dc14b0b44b43ae)
Promise時代のJavaScriptの関数の処理/提供 - mizchi's blog
最近自分で非同期前提のプラグイン書くときはThenableな感じで書いてることが多い。 Thenableってのはどういうことかというと、typescirptのes6-promises では次のように定義してある。 interface Thenable<R> { then<U>(onFulfilled: (value: R) => Thenable<U>, onRejected: (error: any) => Thenable<U>): Thenable<U>; then<U>(onFulfilled: (value: R) => Thenable<U>, onRejected?: (error: any) => U): Thenable<U>; then<U>(onFulfilled: (value: R) => U, onRejected: (error: any) => Thenab
Better Javascript Promises
If you ever had to port localStorage based code to IndexedDB you have been confronted to Javascript's biggest flaw; its asynchronous system is leaky. Once you have an asynchronous method, every other method that calls it must be asynchronous as well. You cannot excape asynchronous code, once it's there it will contaminate the rest of your system slowly turning everything into callbacks. There is n
jQuery.Deferredのエラーハンドリングできない問題の一応の解決
handle_error.js �0�۪� cߪ� // アホすぎ function promisify(fn) { return function() { var d = $.Deferred(); try { d.resolve(fn.apply(this, arguments)); } catch (e) { d.reject(e); } return d.promise(); }; } function error() { throw new Error('error!!!!!!!!!!!'); } $.Deferred().resolve().then(promisify(error)).fail(function(e) { console.log('I catch', e.message); });
あなたが読むべきJavaScript Promises | JSer.info
はじめに この記事は、 JavaScript/ES6 promisesについてを理解するために読んだ方がよいと思われる記事やスライド等を紹介しています。 PromisesやDeferredといった言葉を非同期処理の話などで聞いた事があるかもしれませんが、 現在Promisesは次のECMAScriptの言語仕様として策定が進められています。 ECMAScript Language Specification ECMA-262 6th Edition – DRAFT domenic/promises-unwrapping まだES6は策定段階ですが、既にPromisesについてはpolyfillとして利用できるライブラリ等もあり、また他のライブラリ内でもjQuery.Deferred()やAngularの$q等類似する実装が存在します。 そのため、Generators等に比べると今すぐ使える
jQuery.Deferredの使いどころ - fujimuradaisuke's blog
便利便利と言われつつも使ってみないと良さがわからないのがDeferred Object。身近なところで言うと、$.ajaxが返す、doneとかfailとかを呼べるアレもDeferred Objectです。使いこなすと色々な処理をコールバックを渡すよりもうちょっと綺麗に書けるようになります。 ということで最近プロジェクトで使ったパターンを中心に例をあげてみます。 コードはすべてCoffeeScriptの擬似コードです。 まず最初に便利な書き方を覚える Deferred Objectは$.Deferred()で作るわけですが、これには「作られたDeferred Object自体を引数にとる関数」を引数として渡せます。これを利用すると d = $.Deferred() doSomethingWithCallback -> d.resolve() d を $.Deferred (d) -> doS
jQuery.Deferredでわかりやすく順番にアニメーションする方法 | スターフィールド株式会社
以前の記事(コチラ→jQueryで順番にアニメーションする方法を考える)で、コールバック関数とdelay()を使って、順番にアニメーションする方法をご紹介しましたが、 今回はjQuery Defferdを使って、処理する順番をよりわかりやすくしてアニメーションする方法をご紹介いたします。 jQuery Defferdの使い方については、コチラのサイトを参考にさせていただきました→「爆速でわかるjQuery.Deferred超入門」 前回の方法を使った場合、並べるアニメーションの数が少ない場合は問題ありませんが、 並べるアニメーションの数が増えてきた場合は、 コールバック関数の中にコールバック関数があるという入れ子の状態が多重になり、 とてもプログラムとして見にくいものとなります。 また、順番を入れ替える必要が出てきたときにも、書き換える作業が煩雑になってしまいます。 その問題を解決してくれ
jQuery.Deferredで非同期をもう少しマシに書くには - 不動産屋のラノベ読み
JavaScript - コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita この記事、「対象読者は JavaScript道初段くらいの人です」を「初級くらいの人です」と誤読したまま読み進めてひどい目に遭いました。初段への道は遠い……！ ただ、もう少しマシな書き方があるなあ、と思ったので記事にします。 jqXHRオブジェクトは代入してから使うと見通しが良い $.when( $.get("hoge.txt"), $.get("piyo.txt"), $.get("nyan.txt"), // 増えた $.get("myon.txt"), // 増えた $.get("pong.txt"), // 増えた $.get("chun.txt") // 増えた ).then(function( hoge, piyo, nyan, // 増えた pong, // 増えた myon
コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか？ 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら
Angular.jsでDeferredしたくて頑張ってみたらcss animationが綺麗に書けた - Qiita
myDeferredA = (state) -> deferred = $q.defer() successMsg = 'Success!' errorMsg = 'Error!' setTimeout( -> $scope.$apply -> if state == 0 deferred.resolve successMsg else deferred.reject errorMsg , 3000) deferred.promise promiseA = myDeferredA(Math.random()*2|0) promiseA.then (msg) -> console.log "success: #{msg}" , (msg) -> console.log "error: #{msg}" 非同期処理の場合Viewの更新が必要になるので、 $scope.$applyの中でdefer
RequireJSを使うのを止めた理由 | それなりブログ
RequireJS はみんな使ってるらしーし、 何かかっこいいし、意識高そうだし、使っとくか！ ・・・と、思って試しに使い始めてみたのですが、 自分が作るような小規模なものの場合、 大変な割に良い事あんまりないので使うのを止めました。 以下、忘れそうなのでその理由をメモって置きます。 基本的に、1枚のJSファイルが1モジュール、ファイル名がコードに影響する。それもあって、結合・圧縮は r.js という専用のツールが必要になる。Grunt の concat とか uglify とか使えない。 AMD の仕様では、「JSファイルのリストを順番通りに読み込み/実行する」ということができない。実際何が困ったかというと、分割した mocha テストケースを順番通りに実行できなくなったということ。結果は変わらなくても、順番通りに実行されないと結果が見辛いし、問題が起こった時に発見が難しい。ただしこれは
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
JavaScript でスマートに非同期なコードを書くための Promise パターンの仕様（改良版）の邦訳です。
JavaScript でスマートに非同期なコードを書くための Promise パターンの仕様（改良版）の邦訳です。原文（英語） お約束の文言ですが、この翻訳は間違ってるかもしれません。ご指摘・ご質問は大歓迎です。 Promise/A+ この提言はPromises/A 仕様の提言の振る舞いを明確にし、かつ事実上の標準をカバーしつつ曖昧・問題のある部分を除いたものである。 Promises/Aと同様に、この提案はPromiseの作成・解決訳注 1・棄却訳注 2の方法については言及しない。 Promises/AからPromises/A+へのすべての差分は、Promises/Aとの差分（英語）に記述してある。 1. 概要 promise は、ある時点でまだ利用できない値を表現する。 promise を利用する主な方法としてthenメソッドがある。 2. 用語 2.1. 「 promise 」とは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - angular/prophecy: Deferred/Promise for AngularJS 2.0
What are the differences between Deferred, Promise and Future in JavaScript?
http://miniapp.org/blog/2013/04/16/523/
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
日々是実装
IBM Developer
