就我们做知,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. 【238】◀▶IEW-Unit03

    Unit 3 Media 柱状图 1.图片及model1分析 The graph below contains information about the average science test s ...

  2. mongodb启动脚本

    #!/bin/sh # #chkconfig: #description: mongodb start() { /usr/local/yunshipei/enterplorer/mongodb/bin ...

  3. JSP编译指令、JSP动作指令

    JSP编译指令:通过指令中的属性配置来向JSP容器发出指令,用来控制JSP页面的某些特征 JSP指令格式:<%@ 指令名   [一个或多个指令属性]%> 1.page:用于对JSP页面中的 ...

  4. URL shortening service

    Use Cases 1, shortening : take a URL => return a much shorter URL 2, redirection : take a short U ...

  5. opencvsharp BitmapSource图片截取问题

    private BitmapSource GetUiImage(FrameworkElement ui) { RenderTargetBitmap bmp=new RenderTargetBitmap ...

  6. HDU - 6341 多校4 Let Sudoku Rotate(状压dfs)

    Problem J. Let Sudoku Rotate Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K ...

  7. debian 7上源码编译MongoDB 3.4版本

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 要想精通一个数据库,除了知道该数据库的功能特性.使用方法等,还需要能够看懂数据库源码,能够使用gdb工具对其 ...

  8. 乐字节-Java8核心特性实战之Stream(流)

    说起流,我们会想起手机 ,电脑组装流水线,物流仓库商品包装流水线等等.如果把手机 ,电脑,包裹看做最终结果的话,那么加工商品前的各种零部件就可以看做数据源,而中间一系列的加工作业操作,就可以看做流的处 ...

  9. jmeter接口测试-调用java的jar包-csv参数化请求-BeanShellPreProcessor生成验签作为请求验证参数-中文乱码----实战

    背景及思路: 需求:要做 创建新卡 接口的测试,要求: 1. 不需要每次手动修改请求参数. 方案:文中先用excle将数据准备好,导出为csv格式,再用jmeter的csv请求进行参数化 2. 卡号需 ...

  10. I.Algorithm Choosing Mushrooms

    链接:https://ac.nowcoder.com/acm/contest/908/I 题意: Baby bear and his good friends are very fond of mus ...