jQuery Deferred和Promise创建响应式应用程序详细介绍

2020-05-22 15:18:24易采站长站整理

}
return cache[ key ].done( callback );
};
}

现在具体的请求逻辑已经抽象出来,我们可以重新写cachedGetScript:

$.cachedGetScript = $.createCache(function( defer, url ) {
$.getScript( url ).then( defer.resolve, defer.reject );
});

每次调用createCache将创建一个新的缓存库,并返回一个新的高速缓存检索函数。现在,我们拥有了一个通用的缓存工厂,它很容易实现涉及从缓存中取值的逻辑场景。
图片加载
  另一个候选场景是图像加载:确保我们不加载同一个图像两次,我们可能需要加载图像。 使用createCache很容易实现:

$.loadImage = $.createCache(function( defer, url ) {
var image = new Image();
function cleanUp() {
image.onload = image.onerror = null;
}
defer.then( cleanUp, cleanUp );
image.onload = function() {
defer.resolve( url );
};
image.onerror = defer.reject;
image.src = url;
});

接下来的代码片段如下:

$.loadImage( “my-image.png” ).done( callback1 );
$.loadImage( “my-image.png” ).done( callback2 );

无论image.png是否已经被加载,或者正在加载过程中,缓存都会正常工作。
缓存数据的API响应
  哪些你的页面的生命周期过程中被认为是不可变的API请求,也是缓存完美的候选场景。 比如,执行以下操作:

$.searchTwitter = $.createCache(function( defer, query ) {
$.ajax({
url: “http://search.twitter.com/search.json”,
data: { q: query },
dataType: “jsonp”,
success: defer.resolve,
error: defer.reject
});
});

程序允许你在Twitter上进行搜索,同时缓存它们:

$.searchTwitter( “jQuery Deferred”, callback1 );
$.searchTwitter( “jQuery Deferred”, callback2 );

定时
  基于deferred的缓存并不限定于网络请求;它也可以被用于定时目的。
  例如,您可能需要在网页上给定一段时间后执行一个动作,来吸引用户对某个不容易引起注意的特定功能的关注或处理一个延时问题。 虽然setTimeout适合大多数用例,但在计时器出发后甚至理论上过期后就无法提供解决办法。 我们可以使用以下的缓存系统来处理:

var readyTime;
$(function() { readyTime = jQuery.now(); });
$.afterDOMReady = $.createCache(function( defer, delay ) {
delay = delay || 0;
$(function() {
var delta = $.now() – readyTime;
if ( delta >= delay ) { defer.resolve(); }
else {
setTimeout( defer.resolve, delay – delta );
}
});
});

新的afterDOMReady辅助方法用最少的计数器提供了domReady后的适当时机。 如果延迟已经过期,回调会被马上执行。