javascript 多个异步处理解决方法

Posted 2020-09-11 成风6

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成功函数里,

书写方便,回看也易懂.少了嵌套就是看到舒服