jQuery：使用.load（）加载php文件时，导致XHR完成的加载随着每次加载而呈指数增长

Question

I am having a problem where by im using .load() to load my php page into the div when ever i press the navbar or link. 我遇到一个问题，当我按导航栏或链接时，通过im使用.load（）将php页面加载到div中。 However I have realised that now after multiple presses of the link and navbar, the "XHR finished loading" increases exponentially and it seems that the same php file gets called more than once. 但是我已经意识到，现在多次按下链接和导航栏后，“ XHR完成加载”成倍增加，并且似乎同一PHP文件被调用了多次。

Part of my javascript code which i put in a general javascript file called general.js which is also inserted to every other php file as it seems that if I dont insert into my php file which require part of my javascript code it would not run 我将我的javascript代码的一部分放入了名为general.js的通用javascript文件中，该文件也插入了其他所有php文件中，因为如果我不插入需要我的javascript代码一部分的php文件，它将无法运行

Part of this code loads a php file into a div . 此代码的一部分将php文件加载到div中。 Whenever any of the navbar becomes click, it loads the php content however the load request load the file multiple times and this increases with the number of clicks. 每当任何导航栏变为单击时，它都会加载php内容，但是加载请求会多次加载文件，并且随着点击次数的增加而增加。

$(".uk-navbar-nav").click(function(){

    if($("#subnav_1").hasClass("uk-active")){
      $("#welcome_tab").load("z_admin_welcome/welcome_admin.php");
      console.log("nav1");
  }
    else if($("#subnav_2").hasClass("uk-active")){
      $("#message_tab").load("z_admin/message_admin.php");
      console.log("nav2");
  }

  else if($("#subnav_3").hasClass("uk-active")){
        $("#Face_tab").load("z_admin_face/face_admin.php");
        console.log("nav3");
      }

  else if($("#subnav_4").hasClass("uk-active")){
        $("#QR_tab").load("z_admin/QR_admin.php");

        console.log("nav4");
    }
});

This is an example file of what is being loaded into the div (welcome_admin.php) 这是正在加载到div中的示例文件（welcome_admin.php）

 <!DOCTYPE html>
 <html>
 <head>
 <!-- css styling is only on admin.php -->
 <!-- br break new line -->
 <script type="text/javascript" src="js/general.js"></script>
 <script type="text/javascript" src="uikit/js/uikit.min.js"></script> <!-- insert this as failing to do so cause it not to work -->

 </head>

 <body>

    <h3> Status </h3>
    <hr> 

    <div class="uk-margin">
        <div data-uk-button-radio data-uk-switcher="{connect: '#radio_status'}" id="welcome_radio_but">
            <button class="uk-button uk-width-1-10 radio_welcome" id="radio_but_1">Available</button>
            <button class="uk-button uk-width-1-10 radio_welcome" id="radio_but_2">Away</button>
            <button class="uk-button uk-width-1-10 radio_welcome" id="radio_but_3">Busy</button>
        </div>
    </div>

    <ul id="radio_status" class="uk-switcher uk-margin">
        <li class="uk-active uk-panel-box uk-width-1-3" aria-hidden="false" id="radio_display_1">Please knock before entering</li>
        <li aria-hidden="true" class="uk-panel-box uk-width-1-3" id="radio_display_2"></li>
        <li aria-hidden="true" class="uk-panel-box uk-width-1-3" id="radio_display_3">Do Not Disturb,please email me</li>

    </ul>


 </body>

 </html>

This is a screenshot of my issue whereby XHR get called and finished multiple times for the same file being loaded. 这是我的问题的屏幕截图，其中XHR被调用并多次加载同一文件。

So in a gist, the issue with being this is that php files gets called multiple time and eventually slowdown/crash the browser. 因此，总的来说，问题在于php文件被多次调用，最终导致浏览器减速/崩溃。

Would like to know: 想知道：

Should i stop attaching one general javascript to all my external php files that i would load into? 我应该停止将一个通用JavaScript附加到我要加载到的所有外部php文件中吗？ (split up the functions and save to multiple different js file? ) （拆分功能并保存到多个不同的js文件中？）
Any other solution? 还有其他解决方案吗？
Thank you any help/suggestion 谢谢您的帮助/建议

Update 1: Where .uk-navbar-nav is being placed, this is the main page 更新1： .uk-navbar-nav的放置位置，这是主页

 <!DOCTYPE html>
<html>


    <head> <!--inseart script here -->
            <title></title>
        <link rel="stylesheet" text="text/css" href="uikit/css/uikit.gradient.min.css">
        <link rel="stylesheet" text="text/css" href="uikit/css/components/sticky.gradient.min.css">

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="uikit/js/uikit.min.js"></script>
        <script type="text/javascript" src="js/general.js"></script>
        <script type="text/javascript" src="uikit/js/components/sticky.min.js"></script>


    </head>

    <body onload="body_load()">


    <div class="uk-container uk-container-center uk-margin-top"> <!--top center margin overall -->


    <h1 class="uk-heading-large uk-panel-title uk-panel-box uk-icon-rebel"> This is the Main Page </h1>

    <!-- simpler header line stop here -->
    <div data-uk-sticky="{animation: uk-animation-slide-top}">
        <nav class="uk-navbar">
          <!-- Navigation tab bars -->
             <ul class="uk-navbar-nav" data-uk-switcher="{connect:'#subnav-pill-content-1'}">
              <li class="uk-active" id="subnav_1" aria-expanded="true"><a href="#"><i class="uk-icon-medium uk-icon-home"></i> Welcome</a></li>
              <li aria-expanded="false" id="subnav_2" class=""><a href="#"><i class="uk-icon-medium uk-icon-envelope"></i> Message</a></li>
              <li aria-expanded="false" id="subnav_3" class=""><a href="#"><i class="uk-icon-medium uk-icon-camera"></i> Facial Recognition</a></li>
              <li aria-expanded="false" id="subnav_4" class=""><a href="#"><i class="uk-icon-medium uk-icon-qrcode"></i> QR Code</a></li>
              <li aria-expanded="false" id="subnav_5" class=""><a href="#"><i class="uk-icon-medium uk-icon-gears"></i> Settings</a></li>
            </ul>

        </nav>
    </div>  
            <ul id="subnav-pill-content-1" class="uk-switcher">
              <!--welcome page -->
              <li class="uk-active" aria-hidden="false" id="welcome_tab" value=""></li>

              <!--Message -->
              <li aria-hidden="true" id="message_tab" class=""></li>

              <!--Facial Recognition -->
              <li aria-hidden="true" id="Face_tab" class=""></li>

              <!--QR Code -->
              <li aria-hidden="true"  id="QR_tab" class=""></li>

              <!--Settings Code -->
              <li aria-hidden="true"  id="settings_tab" class=""></li>
            </ul> 
        <!-- end of navigation tab bar -->

        </div>


     </body>

</html>

Answer 1

Calling the same code twice will add 2 event handlers that do the same thing...loading it again will create a third handler and so on 两次调用相同的代码将添加2个执行相同操作的事件处理程序...再次加载它将创建第三个处理程序，依此类推

Prevent compounding adding the new click handlers by removing the existing ones using off() before you add the new one. 在添加新的单击处理程序之前，请先使用off()删除现有的单击处理程序，以防止添加新的单击处理程序。

$(".uk-navbar-nav").off('click').click(function(){

    // your existing click handler code

});

Ideally you would only need this code loaded once if you were to use event delegation 理想情况下，如果要使用事件委托，则只需将此代码加载一次

Answer 2

Firstly, if your welcome_admin.php is loaded only via jQuery's load function, it should not have an entire HTML code ( html , head , body tags, etc). 首先，如果您的welcome_admin.php仅通过jQuery的load函数load ，则不应包含完整的HTML代码（ html ， head ， body标签等）。 And it should be not loading your general.js file. 而且它不应该加载您的general.js文件。

Try to change it only for the content that should be loaded into the div, eg: 尝试仅针对应加载到div中的内容更改它，例如：

<h3> Status </h3>
<hr>

<div class="uk-margin">
  <div data-uk-button-radio data-uk-switcher="{connect: '#radio_status'}" id="welcome_radio_but">
    <button class="uk-button uk-width-1-10 radio_welcome" id="radio_but_1">Available</button>
    <button class="uk-button uk-width-1-10 radio_welcome" id="radio_but_2">Away</button>
    <button class="uk-button uk-width-1-10 radio_welcome" id="radio_but_3">Busy</button>
  </div>
</div>

<ul id="radio_status" class="uk-switcher uk-margin">
  <li class="uk-active uk-panel-box uk-width-1-3" aria-hidden="false" id="radio_display_1">Please knock before entering</li>
  <li aria-hidden="true" class="uk-panel-box uk-width-1-3" id="radio_display_2"></li>
  <li aria-hidden="true" class="uk-panel-box uk-width-1-3" id="radio_display_3">Do Not Disturb,please email me</li>
</ul>

This will prevent your general.js file being loaded many times, and then, adding new event handlers to your uk-navbar-nav each time your a new page is loaded by jQuery. 这将防止您的general.js文件被多次加载，然后在每次由jQuery加载新页面时向uk-navbar-nav添加新的事件处理程序。

Another thing is: the way you're doing the event delegation is not really cool. 另一件事是：您进行事件委派的方式并不是很酷。 You should be doing: 您应该这样做：

$('.uk-navbar-nav').on('click', 'li', function(e) {
  var item = e.target;

  switch (item.id) {
    case 'subnav_1':
      $('#welcome_tab').load('z_admin_welcome/welcome_admin.php');
      break;
    case 'subnav_2':
      $('#message_tab').load('z_admin/message_admin.php');
      break;
    case 'subnav_3':
      $('#Face_tab').load('z_admin_face/face_admin.php');
      break;
    case 'subnav_4':
      $('#QR_tab').load('z_admin/QR_admin.php');
      break;
  }
});

Answer 3

As other responses and comments said, the problem is that the pages you're loading via $.load() comes with her own javascript, with re-attach a listener to the page. 正如其他回应和评论所说，问题在于您通过$ .load（）加载的页面带有她自己的JavaScript，并在页面上附加了一个侦听器。 So, the next time you try to load a page, its loaded by the original script and by the scripts loaded dinamically, too. 因此，下次您尝试加载页面时，页面将由原始脚本以及由动态加载的脚本加载。 Its not exactly a 'performance' problem, caused by loading contents with $.load() is slow or something, is a logic issue since your script is flawed by design, doing lots of things it shouldn't. 由$ .load（）加载内容引起的缓慢的性能问题不完全是“性能”问题，这是一个逻辑问题，因为您的脚本存在设计缺陷，做了很多不应该做的事情。

The solution is to load just the content you need to show without the javascript. 解决方案是仅加载您需要显示的内容而不使用javascript。

Should i stop attaching one general javascript to all my external php files that i would load into? 我应该停止将一个通用JavaScript附加到我要加载到的所有外部php文件中吗？ (split up the functions and save to multiple different js file? ) （拆分功能并保存到多个不同的js文件中？）

Well, I think the problem is not having a single javascript tied to your php scripts, but having a single php file with both the presentation data and the scripts links. 好吧，我认为问题不在于您的php脚本没有绑定单个javascript，而是具有演示数据和脚本链接的单个php文件。 Should you have a php controller that loads the proper page with proper javascript, and then another set of proper php files with data to present (welcome, message, Face, Qr etc) and no redundant client-side scripting, you would have not this problem. 如果您有一个使用适当的javascript加载适当页面的php控制器，然后使用另一组适当的php文件加载了要显示的数据（欢迎，消息，Face，Qr等），并且没有多余的客户端脚本，那么您将不会有此功能问题。

But, btw, separate your javascript into separate modules is a good decision too. 但是，顺便说一句，将您的JavaScript分成单独的模块也是一个不错的决定。

Any other solution? 还有其他解决方案吗？

Well, you can detach the event listener as you load the new content,with $.off(), so listeners doesn't stack and extra content is not loaded with further requests. 好了，您可以在加载新内容时使用$ .off（）分离事件侦听器，这样侦听器就不会堆叠，并且其他请求也不会加载额外的内容。 But is the kind of lazy approach that tend to be time-costly at the end. 但是，这种懒惰的方法最终往往会花费大量时间。

Answer 4

You can try this: 您可以尝试以下方法：

$(".uk-navbar-nav").click(function(){
    if(!window['once']){
        window['once'] = true;

        //you code...

    }
});

jQuery：使用.load（）加载php文件时，导致XHR完成的加载随着每次加载而呈指数增长

问题描述

4 个解决方案

解决方案1
2 2015-09-27 22:28:47

解决方案2
1 已采纳 2015-09-27 22:39:32

解决方案3
1 2015-09-27 23:45:53

解决方案4
-2 2015-09-27 22:28:15

jQuery：使用.load（）加载php文件时，导致XHR完成的加载随着每次加载而呈指数增长

问题描述

4 个解决方案

解决方案1 2 2015-09-27 22:28:47

解决方案2 1 已采纳 2015-09-27 22:39:32

解决方案3 1 2015-09-27 23:45:53

解决方案4 -2 2015-09-27 22:28:15

解决方案1
2 2015-09-27 22:28:47

解决方案2
1 已采纳 2015-09-27 22:39:32

解决方案3
1 2015-09-27 23:45:53

解决方案4
-2 2015-09-27 22:28:15