$.when().の後のdone(function(){})の処理をしてくれない

Question

Leaflet.jsというMap操作関連のライブラリを使いながら非同期で現在地を取得してユーザーのviewを移動する(flyTo method)コードを以下の通り記載しているのですが、done()部分がwhenの後に実行されません。
もし原因がわかる方がいらっしゃればアドバイスをいただけると幸いです。
よろしくお願いいたします。

<style>.errDisplay{display:none;}</style>
<div class="errorBox errDisplay">error</div>

var $defer = new $.Deferred();
var opts ={
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
}

/*move current*/
$('.current').on('click',function(){
  $.when(
    $defer,
    $('.errorBox').removeClass('errDisplay'),
    navigator.geolocation.getCurrentPosition(cpSuccess,cpFail,opts)
  ).done(function(){
    setTimeout(function(){
     alert("here");//ここが処理されません
     return $defer.resolve();
  },1000)
     return $defer.promise();
  })
})

/*current position*/
function cpSuccess(position){
  const currentLat = position.coords.latitude;
  const currentLng = position.coords.longitude;

  map.flyTo([currentLat,currentLng],14);

  if (current_marker) {
    map.removeLayer(current_marker);
  }
}

Answer 1

括弧の対応がとれていないため、構文エラーでそもそも実行されていないと思います。コンソールにエラーが出力されていませんか？　それともコードの後半を掲載しなかっただけでしょうか。

また、$when の引数に渡されている $defer が、$defer が解決されるまで解決されないようになっているため、 .done() に渡されたコールバックが実行されることはありません。

ご提示のコードは色々とおかしなコードになってしまっていますので、まずは非同期処理の基本から順を追って理解していくといいと思います。

var $defer = new jQuery.Deferred()
$.when($defer).done(function() {
  //下に記載されている $defer.resolve() が実行された後に実行される。
  alert('その後に実行')
})
setTimeout(function() {
  // 1秒後にここが実行される
  alert('1秒経過')
  $defer.resolve()
}, 1000)

このように、 when() に渡したオブジェクトがすべて解決されると、 when に渡したコールバック関数が実行されます。 when() に渡すコールバック関数の中に遅延されたオブジェクトの解決処理を入れてしまうと、その処理は永久に実行されません。

逆に、 Deferred や Promise のような、将来解決されることを意図していないオブジェクトを when の引数に与える意味はありません。($('.errorBox').removeClass('errDisplay') など)

Comments

[pegy]

コメントいただきありがとうございます。ざっくりと順番を考えた場合
1) whenの引数の$deferが解決される
2) doneに渡したコールバック関数が実行される

したがって、私が記載したコードはdone()の中に$defer.resolve()としてしまっているため、whenが解決されることがなくdoneのコールバック関数が実行されることがないと理解することができました。また意図した動作を実現することができました。

一方、以下の2点だけ理解できない点があり、これを今調べているのですが、一旦コメントバックさせていただきます。
・$defer.resolve()としてdeferオブジェクトのresolveメソッドで解決するのとreturn $defer.resolve()でオブジェクトを返してもどちらでも解決して処理がdoneに移るのですが
・promiseについて混乱してきました。。。deferオブジェクトにpromiseメドッドがあったりpromiseオブジェクトにresolveメソッドがあったりそれぞれの役割がどうしても抽象的でわからないので、これは以下のような記事を見ながら奮闘中です、、、難しい
https://app.codegrid.net/entry/deferred-1

気づきをたくさん与えてくださり、本当にありがとうございます

[pegy]

いえ、申し訳ございません、私の勘違いが一つございました。解決したと思ったのですが、結果的に1秒待ってdoneの処理がされているだけで本来意図している、whenのなかの処理、つまり
「現在位置を取得してflyToメソッドで視点を移し終えたら」次に「removeClassする」ではなく
「1秒経過したら」次に「removeClassする」となっておりました。

Answer 2

ざっと見ただけですし、実際に走らせてもいないので間違っているかもしれませんが。

$.when( の次の行の $defer, が原因ではないでしょうか。
これがあるために $.when が終了せず、done が実行されないのだと思います。
この行の意図を確認し、不要なら消してみてください。

Comments

[pegy]

仰る方法で確かに実装することができました、今原因を考え中です、、
お力添えありがとうございます。

[pegy]

上記のコメントと同様ですが解決したと思ったのですが
「現在位置を取得してflyToメソッドで視点を移し終えたら」次に「removeClassする」ではなく
「1秒経過したら」次に「removeClassする」となっており
解決がしておりませんでした。。申し訳ございません。

[2KOH]

このコメントでは、何を実現したくて、何を試し、どんな問題が発生しているのか、わかりません。
未だ「done()部分がwhenの後に実行されない」という問題点が解消されていないのか、解消されたが別の問題が発生したのかも読み取れません。
現在の状況をわかりやすく書き直してください。

[pegy]

コメントありがとうございます、失礼いたしました。
●実現したいこと
1.currntをクリックする
2..errorBoxからerrDisplayが.removeClassされる
3.whenのなかでnavigator.geolocation.getCurrentPosition(cpSuccess,cpFail,opts)関数が実行される、具体的にはgeolocationで位置情報が取得されてleafletライブラリのflyToメソっドで現在の視点が現在地に移る
4.3.の処理が終わるとerrorBoxにerrDisplayがaddClassされる
もっとも重要なことは3の処理が終わった後に4が実行されてほしいということになります。
●お二方のご回答から修正したコード
$('.current').on('click',function(){
$('.errorBox').removeClass('errDisplay')
if (navigator.geolocation) {
$('.loading').removeClass('loading_hide')
$.when(
$defer
).done(function(){
$('.errorBox').addClass('errDisplay')
})
setTimeout(function(){
navigator.geolocation.getCurrentPosition(cpSuccess,cpFail,opts)
$defer.resolve();
},1000)
}else{
alert("位置情報の取得に失敗しましたerr:[1]")
}
})
●発生している問題
もともとの問題であったremoveClassとaddClassが同時に処理されてしまう点は解消したのですが、このコードによってremoveClassされてから1秒後にはaddClassが実行されてしまう、つまり上記でいう3の処理はまだ終わっていないにもかかわらず4が実行されているということが現在の問題です。3の処理はgeolocationを利用しているので現在地を取得する時間は1秒のこともあれば5秒のこともあり予測することができないため、3の処理が終わればという条件で4を実行したいのですがそれが実装できないという点にございます。

何かあればまたご指摘をいただければ幸いです。
よろしくお願い申し上げます。

[2KOH]

根本的な問題として、非同期処理が理解できていないようで、やりたいことと実際のコードが大幅に乖離しているようです。

ブレークポイントを設定したり、コードに console.log を追加するなどで、コードがどういう順番で実行されているか確認してみてください。
3の処理が終わった後に4が実行されていないとかそういうレベルではなく、メチャクチャな順番で実行されてしまっていることがわかると思います。
これを修正することは回答の範疇を超えます。

非同期処理（navigator.geolocation.getCurrentPosition ではコールバックが使われているので、必要ならコールバックも）をきちんと理解し、その上で自分で修正してみて、それでもわからなければそのときに質問し直してください。

[pegy]

コメントありがとうございます。承知をいたしました、地道に確認をしてみようと思います。
よろしくお願い申し上げます、