javascript - 为什么ajax成功函数运行2次？

Question

main.html

<script src="jsv3/onload.js"></script>

<script>
var countImage = 0;
function load_pages(page) {
    $.ajax({
        type: "GET",
        url: "scandir.php",
        data: "page=" + page,
        dataType: 'json',
        success: function (data) {
            var num = 0;
            var cache = [];
            var startNum = 0;
            var endNum = 0;

            $.each(data, function(i,paths){
            if ( !(page == countImage) && !(page+1 == countImage))
            {
                    if (paths[0] != ''){
                        num = parseInt(paths[0].split("_P")[1],10);
                        if (!$('#img_'+num).length){
                        $("#div_"+num).append("<img id = 'img_"+num+"' src = '"+paths[0]+"' alt = 'flip book' />");
                        }
                        cache.push (num);
                    }

                    if (paths[1] != ''){
                        num = parseInt(paths[1].split("_P")[1],10);
                        if (!$('#img_'+num).length){
                        $("#div_"+num).append("<img id = 'img_"+num+"' src = '"+paths[1]+"' alt = 'flip book' />");
                        }
                        cache.push (num);
                    }
            }
            });

            startNum = cache[0];
            endNum = cache[cache.length-1];

            for (var z = 0; z < 2; z++) {
                startNum--; 
                if ($('#img_'+startNum).length){
                $("#img_"+startNum+":last-child").remove();
                }
            }

            for (var x = 0; x < 2; x++) {
                endNum++;   
                if ($('#img_'+endNum).length){
                $("#img_"+endNum+":last-child").remove();
                }
            }

            /*if ($('#img_6').length)
            alert ('img6 exist');
            else
            alert ('img6 not exist');*/

        }
    });
}

function create_div() {
    var counter = 1;
    $.ajax({
        type: "GET",
        url: "countImg.php",
        dataType: 'json',
        success: function (data) {
            //$("#book").append("<div id='cover'></div>");
            countImage = data;
            for (var j = 0; j < data; j++) {
                $("#book").append("<div id = 'div_"+counter+"'></div>");
                counter++;
            }
            counter = 1;
        }
    });
}

$(document).ready(function(){
    console.log('test');
    create_div();
});
</script>

onload.js（调用初始化函数）：

/* = Start
-------------------------------------------------------------- */

$(window).bind('keydown', function(e){

    if (e.keyCode==37)
        $('#book').turn('previous');
    else if (e.keyCode==39)
        $('#book').turn('next');

}); 

/*   Moved to the html file (FlipV5.html) to ensure the page loading is finished before initialize turn.js */

$(window).load(function(){
    $('#page').show();
    Book.init();

    if (isiPhone()) {
        $('#page').addClass('mobile');
    } else {
        Book.zoom_auto();
        Book.book_position();
    }
    Book.dragdrop_init();

    Navigation.init();
    calculate_zoom_factor();

});



$(window).resize(function() {

    if (!isiPhone()) {
        Book.book_position();
        Book.zoom_auto();
        Book.dragdrop_init();
    }
    calculate_zoom_factor();

});

function resizeDetect() {
    var rtime = new Date(1, 1, 1, 1,00,00);
    var timeout = false;
    var delta = 200;

    $(window).resize(function() {
        rtime = new Date();
        if (timeout === false) {
            timeout = true;
            setTimeout(resizeend, delta);
        }
    });

    function resizeend() {
        if (new Date() - rtime < delta) {
            setTimeout(resizeend, delta);
        } else {
            timeout = false;
            window_width = $(window).width();
            window_height = $(window).height();

            if ( $(window).width() > $(window).height() ) {
            //Book.scaleVertical();
            } else {


            }


        }               
    }
}

resizeDetect();

onload.js（初始化函数）

  init: function() {


        default_book_width  = WIDTH_BOOK;
        default_book_height = HEIGHT_BOOK;
        default_page_width  = WIDTH_BOOK;
        default_page_height = HEIGHT_BOOK;
        window_height       = $(window).height();
        window_width        = $(window).width();
        zoom_steps      = ZOOM_STEPS_LENGTH;
        current_zoom_step   = 0;
        dbl_clicked = false;
        on_start = true;
        self = this;

        $('#book').turn({
            display: 'double',
            acceleration: true,
            elevation:50,
            when: {
                first: function(e, page) {
                    $('.nav_arrow.prev').hide();
                },

                turned: function(e, page) {
                    if (page > 1) {
                        $('.nav_arrow.prev').fadeIn();
                        $('#about').hide();
                    }
                    if ( page < $(this).turn('pages') ) {
                        $('.nav_arrow.next').fadeIn();
                    }
                    pageNo = $('#book').turn('page');
                    load_pages(pageNo);                                        
                },

                turning: function(e, page) {
                    if (page < 2) {
                        $('#about').show();
                    }
                },

                last: function(e, page) {
                    $('.nav_arrow.next').hide();
                }   
            }
        });
        Book.arrows();
    },

    scaleHorizontal: function() {
        new_width   = $(window).width()-100;
        ratio       = new_width / $('#page').width();
        new_height  = $('#page').height() * ratio;
        $('#page').css({
            width: new_width, 
            height: new_height
        });
        $('#book').turn('size', new_width, new_height);
    },

    scaleStart: function() {
        if ( on_start == true ) {
            bookHeightCheck();          
            if ( higherThanWindow == true ) {
                Book.scaleVertical();
                if ( $('#page').width() > $(window).width() ) {
                    Book.scaleHorizontal();
                }
            } else {
                Book.scaleHorizontal();
            }
            on_start = false;
        }
    },

流程是这样的： main.html 调用 create_div 来做一些函数，并且由于它附加了 onload.js，它运行 Book.init() ，它将调用 load_pages 函数。所以，我相信问题是由于两个ajax调用是同时实现的？

create_div() ajax 意外检测到 load_pages 中的 ajax 调用是成功的，所以它运行了两次成功函数。

如何解决这样的问题？谢谢