页面回调上的 Ajax 请求重复

Question

我制作了一个 ajax 脚本，调用 php 中 #container div 中询问的页面，所以如果我调用 project.html 页面，请求运行良好，调用页面和 $getscript 关联但如果我尝试回调我的主页请求是重复的：

还有我的php函数：

 <?php $d="pages/" ; if(isset($_GET[ 'p'])){ $p=strtolower($_GET[ 'p']); if(preg_match( "/^[a-z0-9\-]+$/",$p) && file_exists($d.$p. ".html")){ include $d.$p. ".html"; } else{ include $d. "404.html"; } } else{ include $d. "home.html"; } ?>

这是我的 ajax 请求：

var afficher = function(data, page) {

    $('#container').fadeOut(500, function() {
        $('#container').empty();
        $('#container').append(data);
		
        $('#container').fadeIn(100, function() {});

    });
};

var loadPage = function(page, storeHistory) {
    if (typeof storeHistory === 'undefined') {
        storeHistory = true;
    }

    $.ajax({
        url: 'pages/' + page,
        cache: false,
        success: function(html) {
            afficher(html, page);
            if (storeHistory === true) {
                history.pushState({
                    'key': 'value',
                    'url': page
                }, '', page);
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            afficher('erreur lors du chagement de la page');
        }
    });

    return false;
};

window.addEventListener('load', function() {
    setTimeout(function() {
        window.addEventListener('popstate', function(e) {
            if (e.state === null) {
                loadPage('home.html');
            } else {
                loadPage(e['state']['url'], false);
            }
        });
    }, 0);
});

$(document).ready(function() {
	 $('.project a').on('click', function(e) {
        var page = $(this).attr('href');
        loadPage(page);
        return false;
    });

	 $('#menu a').on('click', function() {
        var page = $(this).attr('href');
        loadPage(page);
        return false;
    });
  
 });

如何解决调用主页时多次请求的问题？

Answer 1

这里的问题是事件被一次又一次地添加。一个临时解决方案和建议的解决方案是每次调用另一个 ajax 时中止以前的 ajax。所以它可以是：

var lastRequest = null;
if(lastRequest!=null){
lastRequest.abort();
}
lastRequest = $.ajax({
//your code
    });

所以，通过这种方式，一次只有一个活动的 ajax。

希望对您有所帮助。