• 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);
            }
        });
    });
  • 相关阅读:
    CentOS 7 SSH远程证书登陆
    Keepalived安装配置入门
    Docker-Compose 一键部署Ningx+.Net Core+Redis集群
    .Net Core Cookie跨站点共享 会话保持
    .Net Core EF Core之Sqlite使用及部署
    CentOS 7 Fail2ban防暴力破解
    CentOS 7 Nginx安装配置
    CentOS 7 Firewalld 常用操作
    Linux 修改SSH端口及禁用ROOT远程SSH登陆
    Mysql MariaDB安装
  • 原文地址:https://www.cnblogs.com/dreamsqin/p/6557001.html
Copyright © 2020-2023  润新知