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成功函数里,
书写方便,回看也易懂.少了嵌套就是看到舒服