タイムアウト後に2番目の$ .ajax（）を使用してjQuery Deferred/Promiseを使用する方法

Question

oResにプライマリソース（getData1()）から来る可能性がある場合にのみ実行するイベントハンドラを$someElにバインドしました。 ）またはバックアップ元（getData2()）。プライマリソースがタイムアウトした場合にのみ、バックアップソースからデータが要求されます。

プライマリソースがタイムアウトしない場合、すべてが機能します。ただし、バックアップgetData2()関数が呼び出されると、dfdは解決されないため、$someElをクリックするとログに記録されることはありません。 getData2()のDeferredオブジェクトが$someElクリックハンドラが参照している変数dfdを上書きしているため、動作していないと思われます。

私は「ベストプラクティス」パターンを使用してDeferred/Promiseを適用していないと感じています。このシナリオでは、タイムアウト後にクリックハンドラがプライマリAJAXレスポンスまたはセカンダリAJAXレスポンスのいずれかからoResが移入されるのを適切に待つようにしますか？

明確化のためのいくつかの注意は：

• getData1()は、文書は、文書のロード時にいつでも発射するので、イベントハンドラは$(document).ready()
の外で定義する必要があり $someEl.click()
準備ができているだけで後に実行する必要があります
• 私はここでのjQuery 1.7.1

とこだわっているコードです：

var oRes, dfd; 

// Get data from primary source 
function getData1() { 
    dfd = $.ajax({ 
    ... 
    success: function(data) { 
     oRes = data; 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     if (textStatus==='timeout') getData2(); 
    }, 
    timeout: 10000 // 10-second timeout 
    }); 
} 

// Get data from backup source 
function getData2() { 
    dfd = $.ajax({...}); 
} 

$someEl.click(function() { 
    dfd.done(function() { 
    console.log('This should only log when oRes is ready'); 
    }); 
}); 

$(document).ready(function() { 
    getData1(); 
}); 

私はこのペンで私の状況をシミュレートしました。基本的にhttp://codepen.io/thdoan/pen/pyVyKj

、私が出力するイベントハンドラを取得し、トラブルを抱えている「データが準備ができています！」 oResが入力されたときに、ページがロードされた後に手動でボックスをクリックする必要はありません。

Answer 1

私はあなたがそれを1つのレベルまで持ち上げる必要があると思います。

クリックハンドラがリッスンする遅延インスタンスを作成します（インスタンスは変更されません）。

その後、getData1()またはgetData2()のいずれかから延期することを解決：

var oRes, 

    // Resolve this deferred when data has been successfully loaded: 
    dfd = $.Deferred(), 

    // But add listeners to this promise: 
    dfdPromise = dfd.promise(); 

// Get data from primary source 
function getData1() { 
    $.ajax({ 
     ... 
     success: function(data) { 
      oRes = data; 

      // Resolve when data loaded: 
      dfd.resolve(data); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      if (textStatus==='timeout') getData2(); 
     }, 
     timeout: 10000 // 10-second timeout 
    }); 
} 

// Get data from backup source 
function getData2() { 
    $.ajax({...}) 
     .then(function(data){ 
      // Fallback data resolve: 
      dfd.resolve(data); 
     }); 
} 

$someEl.click(function() { 
    dfdPromise.done(function() { 
     console.log('This should only log when oRes is ready'); 
    }); 
}); 

$(document).ready(function() { 
    getData1(); 
}); 

Answer 2

私はajaxリクエストのコールバック内に関数呼び出しを含めます。

var oRes = null; 
var dfd = null; 

// Get data from backup source 
function getData2() { 
    dfd = $.ajax({...}); 
} 

// Get the primary data source 
function getData1() { 
    dfd = $.ajax({ 
    success: function(data) { 
     oRes = data; 

     // set the click handler when oRes is successfully set 
     $(someEl).click(function() { 
      console.log('This should only log when oRes is ready'); 
     }); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     if (textStatus==='timeout') getData2(); 
    }, 
    always: function(){ 
     if (oRes==null){ 
      getData2(); 
     } 
    } 
    timeout: 10000 // 10-second timeout 
    }); 
}