为什么接口调用一次，却请求了两遍？

Question

进入页面只调用了一次，但是打断点却在请求完一次后，又跳到这个方法再次执行了一次这个方法。这是什么原因？

断点的顺序是先走了两次调用，没进方法。调用完两次后，再进了方法，然后才走了两次方法。

//展示用户列表
function getAllUsers(pagenum) {
    $.ajax({
        url: '/user/getAllUsers',
        data: {
            "pagenum": pagenum
        },
        type: "post",
        dataType: "json",
        success: function(data) {
            if (data.flag == "success") {
                $("tbody").html(" ")
                var list = data.Data;
                var count = data.count;
                //表格
                for (var i = 0; i < list.length; i++) {

                    var num = i + (pagenum - 1) * 10 + 1; //序号

                    $("tbody").append(
                        `<tr id="${list[i].uid}">  
                        <td>${num}</td>   
                        <td class='accountName'>${list[i].username}</td>   
                        <td class='accountPass'>${list[i].password}</td>  
                        <td class='role'>${list[i].rolename}</td> 
                        <td class='lastTime'>${list[i].lastlogintime}</td> 
                        <td class='lastIP'>${list[i].lastloginip}</td> 
                        <td><i class="fa fa-edit modify" data-toggle="modal" data-target="#modifyUserModal" title="修改"></i>
                            <i class="fa fa-trash-o deleteUser" title="删除"></i>
                        </td> 
                        </tr>
                     `
                    )
                }

                //分页
                layui.use(['laypage'], function() {

                    var laypage = layui.laypage;
                    // 渲染分页
                    laypage.render({
                        elem: 'layPage' // 分页容器的id
                            ,
                        layout: ['prev', 'page', 'next', 'limits',
                                'count'
                            ] // 排版
                            ,
                        limit: 10 // 每页显示数
                            ,
                        count: count // 总条数
                            ,
                        curr: pagenum // 当前页
                            ,
                        groups: 3 // 连续出现的页数
                            ,
                        theme: '#1E9FFF' // 自定义选中色值
                            ,
                        skip: true // 开启跳页
                            ,
                        jump: function(obj, first) { // 点击页码跳页
                            if (!first) {
                                $('tbody').html("");
                                getUserLog(obj.curr)
                            }
                        }
                    });
                })
            } else {
                layer.msg('查询失败', {
                    offset: "3.8%",
                });
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
        }
    })
}

$(function(){
    getAllUsers(1)
})

Answer 1

你在chrome断点后看call stack就知道是哪个位置发出的，确定是不是还有其他位置调用。

Answer 2

是实际网络请求了两次还是断点到那儿了两次，这是两回事。看看network里面到底请求了几次吧

Answer 3

也有可能是按钮的事件冒泡导致请求了两遍

Answer 4

加个log , 先确认下是不是触发了两次 getAllUsers 还是回调了两次success ？

Answer 5

是不是jquery或layui重复引用，看看请求中是不是有同一个js库请求了2次

Answer 6

看下网络截图是不是其中一个是OPTION请求（method为option）