Question

当用户点击某些导航链接时，我有一个AJAX调用。该呼叫更新页面的内容，并且URL被更新为存储内容的资源的相应链接。

我的问题是用户点击链接的次数越多，＆＃34; swapContent（）＆＃34;每次点击都会递归调用函数的次数越来越多。

例如，如果我点击链接说＆＃34;第2页＆＃34;，该功能将被调用一次，然后如果我点击回主页，该功能被调用2或3次，所以在......

有人能够指出为什么会这样吗？

function supports_history_api() {
  return !!(window.history && history.pushState);
}

function swapContent(href) {
  var req = new XMLHttpRequest();
  req.open("GET",
           "http://localhost/portfoliowebsite/PHP/" +
             href.split("/").pop(),
           false);
  req.send(null);
  if (req.status == 200) {
    document.getElementById("homeContBox").innerHTML = req.responseText;
    setupHistoryClicks();
    return true;
  }
  return false;
}

function addClicker(link) {
  link.addEventListener("click", function(e) {
    if (swapContent(link.href) == true) {
      history.pushState(null, null, link.href);
      e.preventDefault();
    }
  }, true);
}

function setupHistoryClicks() {
  addClicker(document.getElementById("home"));
  addClicker(document.getElementById("cv"));
  addClicker(document.getElementById("port"));
  addClicker(document.getElementById("contact"));
}

window.onload = function() {
  if (!supports_history_api()) { return; }
  setupHistoryClicks();
  window.setTimeout(function() {
    window.addEventListener("popstate", function(e) {
    alert("");
      swapContent(location.pathname);
    }, false);
  }, 1);
}

Answer 1

问题在于setupHistoryClicks（）：

addClicker（link）不断添加事件侦听器，因此每次加载内容时都会向链接添加更多执行。

因此，您将执行更多点击。

AJAX重复出现函数调用

1 个答案: