zoukankan      html  css  js  c++  java
  • 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);
            }
        });
    });
  • 相关阅读:
    LeetCode_21.合并两个有序链表
    LeetCode_70.爬楼梯
    LeetCode_001.两数之和
    LeetCode_509.斐波那契数
    Eclipse(2019-03版本)汉化
    修改Gradle本地仓库
    解决Eclipse导入Gradle项目时在 Building gradle project info 一直卡住
    Eclipse设置字体大小
    @Transactional spring 事务(转载)
    @Transactional spring 事务失效(转载)
  • 原文地址:https://www.cnblogs.com/dreamsqin/p/6557001.html
Copyright © 2011-2022 走看看