ajax请求执行完成后再执行其他操作（jQuery.page.js插件使用为例）

就我们做知，ajax强大之处在于它的异步请求，但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作

这个时候往往我们用到ajax的回调函数，但是假如你不想或者不能把接下来的操作写在回调函数中，怎么办？

以jquery.page.js插件为例，分页初始化如下：

$(".tcdPageCode").createPage({
        pageCount:100,
        current:1,
        backFn:function(p){
            //console.log(p);
        }
    });

这里pageCount总页数我需要从后台动态获取，也就是需要ajax请求接口后返回的值

一开始我把分页初始化的这段代码写在ajax的回调函数中

function getRecourcesAction(result) {
    if (result != null) {
       $(".tcdPageCode").createPage({   
        pageCount: result.pageCount,
        current: nowPage,
        backFn: function (p) {
            pageNo=p-1;
            nowPage=p;
            getRecources(getRecourcesAction);
        }
    });
        var html = template('recources', {
            list: result.data
        });
        $("#recource li").remove();
        $("#recource").append(html);
    } 
    else {
        layer.open({
                title: '提示',
                content: "资源查询失败!"
            });
    }
}

因为backFn中会继续请求，所以会重复创建，上一页、下一页翻页时会出现连续跳页的情况，最后超出总页数而溢出出错

解决办法：

设置全局变量pageCount，先进行ajax请求，得到返回的总页数后赋值给pageCount，然后再进行初始化分页。注意：ajax请求时，设置async: false（默认为true），进行同步请求，即Ajax请求将整个浏览器锁死，只有请求结束后才能执行其他操作，否则pageCount值还未返回就先初始化分页了。

$(function(){
    getRecources(getRecourcesAction);   //初始化页面(资源初始化)
  
    //初始化分页
    $(".tcdPageCode").createPage({   
        pageCount: pageCount,
        current: nowPage,
        backFn: function (p) {
            pageNo=p-1;
            nowPage=p;
            getRecources(getRecourcesAction);
        }
    });
});

 

转载于:https://www.cnblogs.com/dreamsqin/p/6557001.html