[英]How do I use jQuery promise/deffered in a custom function?
我有一個通過navigator.geolocation
獲取位置的函數:
var getLocation = function( callback ){
navigator.geolocation.getCurrentPosition( callback || function( position ){
// Stuff with geolocation
});
};
我想使它這樣我就可以用鏈jQuerys'這個功能遞延對象,但我仍然沒有成功地把握遞延的概念和使用方法。
我正在尋找類似於這個偽代碼的東西:
getLocation().then(function(){
drawMarkerOnMap();
});
這種語法是否可以在不向后翻轉並在代碼中淹沒的情況下實現?
您必須實例化一個新的延遲對象並從該函數返回它(或它的promise)。 獲得響應后調用其.resolve
方法:
var getLocation = function() {
var deferred = new $.Deferred();
navigator.geolocation.getCurrentPosition(function( position ){
// Stuff with geolocation
deferred.resolve(position);
});
// return promise so that outside code cannot reject/resolve the deferred
return deferred.promise();
};
用法:
getLocation().then(drawMarkerOnMap);
參考 : jQuery.Deferred
附錄 :
我建議不要使用兩種方法,延遲對象和將回調傳遞給函數,以保持界面簡單。 但是如果你必須保持向后兼容,你可以簡單地在延遲對象上注冊傳遞的回調:
var getLocation = function(callback) {
var deferred = new $.Deferred();
if ($.isFunction(callback)) {
deferred.then(callback);
}
navigator.geolocation.getCurrentPosition(function( position ){
// Stuff with geolocation
deferred.resolve(position);
});
// return promise so that outside code cannot reject/resolve the deferred
return deferred.promise();
};
盡管上面的例子對我有所幫助,但我不得不做更多的閱讀來圍繞這個概念。
下面是基於我的代碼的示例,其中包含的注釋可以幫助我回到它並希望有人閱讀此Stackoverflow問題:
/* promise based getFilter to accommodate getting surrounding suburbs */
oSearchResult.fPromiseOfFilterSetting = function fPromiseOfFilterSetting(sId) {
var self = this;
self.oPromiseCache = self.oPromiseCache || {}; // creates a persistent cache
// across function calls
var oDeferred = $.Deferred(); // `new` keyword is optional
var oPromise = oDeferred.promise();
// leverage the cache (it's ok if promise is still pending), you can key
if (self.oPromiseCache[sId] !== undefined) {
return self.oPromiseCache[sId];
}
else {
self.oPromiseCache[sId] = oPromise;
}
// do our asynchronous action below which at some point calls
// defered.resolve(...) and hence complete our promise
$.cmsRestProxy.doAjaxServiceRequest('ocms_searchProperties_Extension', {
action : 'getSurroundingSuburbs',
sSuburbIds : 'a0RO0000003BwWeMAK'
}, function(result, json) {
console.log("doAjaxServiceRequest(
'ocms_searchProperties_Extension')", json);
oDeferred.resolve(json); // `json` is our result and `.resolve(json)`
// passes the value as first argument to
// the `oPromise.done`, `oPromise.fail`
// and `oPromise.always` callback functions
})
// We can now return the promise or attach optional `oPromise.done`,
// `oPromise.fail`, and `oPromise.always` callbacks which will execute first
// in the chain.
//
// Note that `oPromise.then(doneCallback, failCallback, alwaysCallback)`
// is short form for the below
oPromise.done(function(value) { // returned by promise.resolve(...); call
console.log('will run if this Promise is resolved.', value);
})
oPromise.fail(function(value) {
console.log("will run if this Promise is rejected.", value);
});
oPromise.always(function(value) {
console.log("this will run either way.", value);
});
// return a promise instead of deferred object so that
// outside code cannot reject/resolve it
return oPromise;
}
// then to use one would do
oSearchResult.fPromiseOfFilterSetting().done(function(value) {alert(value)});
// or using $.when chaining
$.when(
oSearchResult.fPromiseOfFilterSetting()
)
.done(
function fDoneCallback(arg1, arg2, argN) {
console.debug(arguments) // `arguments` is an array of all args collected
}
);
我知道它在標題中說jQuery但是當我問這個問題時,承諾對於網絡而言是新的,jQuery是事實上的庫。 這是沒有jQuery的更現代的答案。
Promise
所有現代瀏覽器 (IE11及以下版本除外; 如果需要 , 使用polyfill )使您可以使用本機Promise
構造。
let getLocation = () => {
return new Promise( ( resolve, reject ) => {
try {
navigator.geolocation.getCurrentPosition( position => {
resolve( position )
})
} catch ( err ) {
reject( err )
}
})
};
用法:
let runGetLocation = () => { getLocation().then( position => console.log( position ) ) }
您也可以使用ES2016 async / await而不是.then .then()
:
let runGetLocation = async () => {
try {
let position = await getLocation()
console.log( position )
} catch ( err ) { console.log( err ) }
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.