JS异步处理真是一个让人头疼的东西,尤其是AJAX这个玩意.刚开始为了方便我会将jquery ajax 这个属性这样设置 async: false
但是这样做问题很多,会让浏览器假死,好在ajax提供了一个defferd的新办法.
function makeJsonp(url, data) {
return $.ajax({
type: "POST",
data: data,
url: url,
dataType: "jsonp",
jsonp: "callback"
});
}
lunboDfd=makeJsonp(host+'homenews',data).done(function (result) {
$swiperContainer.children('.swiper-wrapper').html(produceHtml(result))
});
$.when(lunboDfd).done(function () {
var swiper = new Swiper('#swiperContainer', {
loop : true,
/!*spaceBetween: 10,*!/
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
});
先监测ajax执行成功后,将html内容插入到页面里,之后在执行swiper轮播图,这样swiper才能正常执行.
这样写方便管理代码,可以把单独功能的代码写在另一个模块里,不用混写在一起,放到AJAX success成功函数里,
书写方便,回看也易懂.少了嵌套就是看到舒服