jQuery: 当使用.load() 加载php 文件时，导致XHR 完成加载随着每次加载呈指数增长

Question

我遇到一个问题，当我按下导航栏或 link 时，我使用 .load() 将我的 php 页面加载到 div。但是我已经意识到，现在多次按下 link 和导航栏后，"XHR finished loading" 呈指数增长，而且似乎同一个 php 文件被调用了不止一次。

我的 javascript 代码的一部分，我将其放入一个名为 general.js 的通用 javascript 文件中，该文件也被插入到每个其他 php 文件中，似乎如果我不插入我的 php 文件，它需要我的 javascript 代码的一部分，它不会运行

此代码的一部分将 php 文件加载到 div 中。每当任何导航栏被点击时，它都会加载 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");
    }
});

这是加载到 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>

这是我的问题的屏幕截图，其中 XHR 被调用并多次完成加载同一个文件。

因此，简而言之，问题在于 php 文件被多次调用，最终 slowdown/crash 浏览器。

想知道：

我是否应该停止将一个通用 javascript 附加到我要加载到的所有外部 php 文件？（拆分功能并保存到多个不同的js文件？）
还有其他解决方案吗？

谢谢大家 help/suggestion

Update 1: Where .uk-navbar-nav is being placed, this is the main page

 <!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

你可以试试这个：

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

        //you code...

    }
});

Answer 2

两次调用相同的代码会添加 2 个执行相同操作的事件处理程序...再次加载它会创建第三个处理程序，依此类推

通过在添加新点击处理程序之前使用 off() 删除现有的点击处理程序来防止复合添加新的点击处理程序。

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

    // your existing click handler code

});

理想情况下，如果您要使用事件委托，您只需要加载一次此代码

Answer 3

首先，如果您的 welcome_admin.php 仅通过 jQuery 的 load 函数加载，它不应该有完整的 HTML 代码（html 、head、body 标签等）。它应该不会加载您的 general.js 文件。

尝试只为应该加载到 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>

这将防止您的 general.js 文件被多次加载，然后在每次 jQuery 加载新页面时向您的 uk-navbar-nav 添加新的事件处理程序。

另一件事是：您进行事件委托的方式并不是很酷。你应该这样做：

$('.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 4

正如其他回复和评论所说，问题是您通过 $.load() 加载的页面带有她自己的 javascript，并重新将侦听器附加到页面。因此，下次您尝试加载页面时，它会由原始脚本和动态加载的脚本加载。它不完全是 'performance' 问题，由 $.load() 加载内容缓慢或其他原因引起，是一个逻辑问题，因为您的脚本在设计上存在缺陷，做了很多不应该做的事情。

解决方案是只加载您需要显示的内容，而不加载 javascript。

Should i stop attaching one general javascript to all my external php files that i would load into? (split up the functions and save to multiple different js file? )

好吧，我认为问题不在于将单个 javascript 绑定到您的 php 脚本，而是将单个 php 文件同时包含演示数据和脚本链接.如果你有一个 php 控制器加载正确的页面 javascript，然后是另一组正确的 php 文件，其中包含要显示的数据（欢迎、消息、Face、Qr 等）和没有多余的客户端脚本，你就不会有这个问题。

但是，顺便说一句，将 javascript 分成不同的模块也是一个不错的决定。

Any other solution?

好吧，您可以在加载新内容时使用 $.off() 分离事件侦听器，这样侦听器就不会堆叠，额外的内容也不会随着进一步的请求而加载。但这是一种懒惰的方法，最终往往会耗费时间。

jQuery: 当使用.load() 加载php 文件时，导致XHR 完成加载随着每次加载呈指数增长

jQuery: When using .load() to load php file, cause XHR finished loading to increase exponentially with every load

html

javascript

php

performance

jquery