你的位置:首页 > 软件开发 > Java > jquery的promise实践

jquery的promise实践

发布时间:2015-11-12 19:00:32
在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能。现在就更进一步,完成一个能够一张一张的连续图片加载的功能。功能:1.一张一张加载图片。2.加载错误,超时后显示加载失败图片。对于功能的要求,肯定会存在对加载状态事件的处理以及完成时回调函数 ...

在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能。

现在就更进一步,完成一个能够一张一张的连续图片加载的功能。

功能:

1.一张一张加载图片。

2.加载错误,超时后显示加载失败图片。

对于功能的要求,肯定会存在对加载状态事件的处理以及完成时回调函数的处理,这样不仅会造成代码上的混乱,甚至破坏各种原则,就不再用普通的方法去写了。针对这种状态通知的特点,比较合适采用promise架构进行处理,promise本质上就是订阅发布设计模式的一种,当前这个功能就用jquery自带的promise进行开发。

 

1.完成一个加载图片的代理创建函数,可以生成一个带有加载超时、失败、成功、取消监控能力的代理。

            function createLoadImgProxy(){        var imgCache = new Image();        var dfd = $.Deferred();        var timeoutTimer;        //开始加载超时监控,超时后进行reject操作        function beginTimeoutWatcher(){          timeoutTimer = setTimeout(function(){            dfd.reject('timeout');          }, 10000);        }        //结束加载超时监控        function endTimeoutWatcher(){          if(!timeoutTimer){            return;          }          clearTimeout(timeoutTimer);        }        //加载完成事件处理,加载完成后进行resolve操作        imgCache.onload = function(){          dfd.resolve(this.src);        };        //加载终止事件处理,终止后进行reject操作        imgCache.onabort = function(){          dfd.reject("aborted");        };        //加载异常事件处理,异常后进行reject操作        imgCache.onerror = function(){          dfd.reject("error");        };        return function(eleImg, src){          dfd.always(function(){            //加载完成或加载失败都要终止加载超时监控            endTimeoutWatcher();          }).done(function(src){            //加载完成后,往图片元素上设置图片            loadImg(eleImg, src);          }).fail(function(msg){            //加载失败后,往图片元素上设置失败图片            loadImg(eleImg, 'loadFailed.jpg');          });          loadImg(eleImg, 'loading.gif');          imgCache.src = src;          //开始进行超时加载监控          beginTimeoutWatcher();          return dfd.promise();        };      }

原标题:jquery的promise实践

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录