AJAXリクエストを保留中の500ms後にスピナーを追加するには？

Question

私はjQueryの3で、正しく解決するために熱心だ些細な問題を抱えているので、アイデアはこれです：

1. AJAX要求に
2. 待つ応答を行います。 500ms後に応答がない場合は、スピナーを表示
3. レスポンスが返ってきたらスピナーを非表示にします。

私は現在何か働いています。しかし、問題は、これを正しいやり方でやっていることですか？

// helper function for setTimeout 
function wait(ms) { 
    var deferred = $.Deferred(); 
    setTimeout(function() { deferred.resolve() }, ms); 
    return deferred.promise(); 
} 

var request = $.ajax({ 
    dataType: "json", 
    url: "/api/articles/?" + $.param(params) 
}); 

wait(500).then(function() { 
    if (request.state() === "pending") // works, but the docs says we should do this only for debugging purposes 
     $(".spinner").show(); 
}); 

request.always(function() { 
    $(".spinner").hide(); 
); 

は、我々はrequest.state()この方法を使用することはできますか？これはよりエレガントな方法で解決できましたか？

Answer 1

約束事の状態を同期して調べることなく、実際にこのようなことを試みるべきです。

コードを少し変更する必要があります。

は ではなく、約束のwait()からを繰延返し
• 。
• wait(500)と呼び出し、返されたDeferredへの参照を保持します。
• は、wait(500) Deferredの順応時に無条件にスピナーを示します。
• を拒否するwait(500) ajax約束の据え置きにより、タイムアウトで後で解決できないことを保証します。

このが効果的に延期wait(500)と$.ajax()約束、かつてのスピナーを表示しようとすると、それを阻止しようと、後者の間にレースを設定します。

function delay(ms) { 
    return jQuery.Deferred(function(dfrd) { 
     setTimeout(dfrd.resolve, ms); 
    }); 
} 

var showSpinner = delay(500); // a Deferred that will be resolved after 500ms, unless rejected before that. 

showSpinner.then(function() { 
    $(".spinner").show(); 
}, function() { 
    console.log('The ajax request settled before the timeout'); 
}); 

jQuery.ajax({ 
    dataType: 'json', 
    url: '/api/articles/?' + $.param(params) 
}).always(function() { 
    $(".spinner").hide(); // hide spinner (if the timeout won the race) 
    showSpinner.reject(); // prevent the spinner from being shown 
});