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); } }); });