就我们做知,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);
}
});
});

ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)的更多相关文章

  1. 用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat

    用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat 摘自:https://zhidao.baidu.com/question/492732911.html @echo off ...

  2. C# 本进程执行完毕后再执行下一线程

    最近做了一套MES集成系统,由上料到成品使自动化运行,其中生产过程是逐步的,但是每一个动作都需要独立的线程进行数据监听,那么就需要实现线程等待. 代码: using System; using Sys ...

  3. iOS AFNetWorking中block执行完后再执行其它操作

    需求:同时进行两次网络请求,网络请求是异步的,在网络请求成功后进行其它的操作.两个网络请求是这样,一个网络请求中block执行完之后,再进行其它操作,也是一样的原理,只是这时候不需要线程组了,只需要信 ...

  4. vue在一个方法执行完后再执行另一个方法

    vue在一个方法执行完后执行另一个方法 用Promise来实现.Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况 ES7中新 ...

  5. Java主线程在子线程执行完毕后再执行

    一.join() Thread中的join()方法就是同步,它使得线程之间由并行执行变为串行执行. public class MyJoinTest { public static void main( ...

  6. 使用Promise发送多个异步请求, 全部完成后再执行

    const datas = idList .map(id => url+'/id') .map(url => fetch(url).then(res => res.json())); ...

  7. ES6(Promise)等一个函数执行完后再执行另一个函数

    function text1(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve(cons ...

  8. C# 多线程join的用法,等待多个子线程结束后再执行主线程

    等待多个子线程结束后再执行主线程 class MultiThread{ #region join test public void MultiThreadTest() { Thread[] ths = ...

  9. angularjs中如何在异步请求执行完以后再执行其他函数?

    angularjs中如何在异步请求执行完以后再执行其他函数? 之前脑袋回路就是从上到下的执行js,直到有一次我的页面上已经显示了空才走到angularjs里的$http的成功回调函数里,然后才开始正视 ...

随机推荐

  1. GET 和 POST两种调用方式

    http://www.cnblogs.com/java-pan/archive/2012/02/26/httpclient-post-get.html 通过get和post方式调用http接口,总结如 ...

  2. 0003_Linux基础之常用命令

    1.pwd:查看当前所在目录 2.cd :切换目录 3.ls:查看当前目录下的文件及文件夹: 4.ls -l :列出当前目录下文件及详细信息         drwxr-xr-x   第一个字符为d则 ...

  3. FZU2056 最大正方形(二分答案)

    Problem 2056 最大正方形 Accept: 171    Submit: 516Time Limit: 1000 mSec    Memory Limit : 32768 KB  Probl ...

  4. HDU - 5950 Recursive sequence(二项式+矩阵合并+矩阵快速幂)

    Recursive sequence Farmer John likes to play mathematics games with his N cows. Recently, they are a ...

  5. appium+Java+testng自动化框架搭建-第一季

    app自动化越来越火,随着移动app的不断发展,手机端测试日益火爆,想成为一个高级软件测试工程师必须要掌握,那么我们今天就来搭建appium+Java+testng自动化测试框架. Appium环境搭 ...

  6. Solr 6.7学习笔记(03)-- 样例配置文件 solrconfig.xml

    位于:${solr.home}\example\techproducts\solr\techproducts\conf\solrconfig.xml <?xml version="1. ...

  7. vector详解

    /*vector向量容器*/ //用数组方式访问vector元素 #include<iostream> #include<vector> #include<cstdio& ...

  8. IT兄弟连 Java语法教程 Java平台的版本划分

    自从Sun公司推出Java以来,就力图使之无所不能.Java发展至今,按应用范围划分为3个版本,即Java SE.Java EE和Java ME,也就是SunOne(Open Net Environm ...

  9. Ruby: Case表达式

    Ruby的case表达式有两种形式: 第一种形式接近于一组连续的if语句:它让你列出一组条件,并执行第一个为真的条件表达式所对应的语句. 第二种形式,在case语句的顶部指定一个目标,而每个when从 ...

  10. C# 多线程程序隐患

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...