jQuery を使用して JavaScript の非同期戻り値を処理する方法

jQuery を使用した JavaScript の非同期戻り値

jQuery を使用して GUID 値を非同期的に取得して割り当てようとすると、開発者はよくこの問題に遭遇します。ここで、アラートには値が正常に表示されますが、値を返して変数に代入しようとすると、値は未定義のままになります。

これは、非同期呼び出しの性質により発生します。 elqTracker.pageTrack() 関数が呼び出されると、getGUID() 関数の実行が終了する前であっても、すぐに戻ります。その結果、returnValue は undefine に設定されます。

この制限に対処するために、jQuery は $.Deferred オブジェクトを提供します。 trackPage() から Promise を返すことで、それにコールバックをアタッチして非同期結果を処理できます。

<code class="javascript">function trackPage() {
  var elqTracker = new jQuery.elq(459),
    dfd = $.Deferred();

  elqTracker.pageTrack({
    success: function () {
      elqTracker.getGUID(function (guid) {
        dfd.resolve(guid);
      });
    }
  });

  return dfd.promise();
}</code>

trackPage() によって返された Promise にコールバックをアタッチすることで、次のときに GUID 値にアクセスできるようになります。

<code class="javascript">trackPage().done(function (guid) {
  alert("Got GUID:" + guid);
});</code>

さらに、Promise を使用すると複数のコールバックのチェーンが可能になり、非同期操作を処理する柔軟な方法が提供されます。

<code class="javascript">var pageHit = trackPage().done(function (guid) {
  alert("Page Hit GUID:" + guid);
});

$("button").click(function () {
  pageHit.done(function (guid) {
    alert("Clicked on Page GUID:" + guid);
  });
});</code>

このアプローチにより、戻り値が確実に処理されます。非同期的に行われるため、後続の操作で適切な割り当てとアクセスが可能になります。

以上がjQuery を使用して JavaScript の非同期戻り値を処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。