Question

我有一个网页，所有链接都使用.htaccess重定向到index.php，并在索引页面中动态添加或删除页面。

index.php

<nav>
    <ul>
      <li>Main</li>
      <li>About</li>
      <li>Contact</li>
  </ul>
</nav>
<div id="loaded"></div>

另一方面，我有一个views文件夹，在单击导航栏按钮后，我使用jquery加载功能将视图加载到<div id="loaded"></div>

我的问题是关于main.php的，您可以在下面看到。

main.php

<script src="js/main.js"></script>
  <div id="banner">
    <div id="first" class="banner-each"></div>
    <div id="second" class="banner-each"></div>
    <div id="third" class="banner-each"></div>
    <div id="prev" class="banner-btn">&lt;</div>
    <div id="next" class="banner-btn">&gt;</div>
    <div id="slide-count" class="counting"></div>
  </div>

Main.php上有一个横幅，上面有一个外部JS文件。当我按下主按钮时，它会加载并正常运行。然后，我单击其他导航按钮，然后依次创建$('#loaded').html('');和$('#loaded').load('views/about.php');。一段时间后，当我再次单击主按钮并将main.php再次加载到名为load的div中时，它开始对横幅和setTimeout函数感到困惑，并且setIntervals变得混乱。继续单击按钮并打开main.php几次，就会越来越混乱。

我尝试了一些类似的事情；从main.php中删除外部js文件，并将所有内容都写入<script>标记中，但这并不能解决我的问题。我认为，问题是它多次调用脚本，但是在删除main.php时，它们停留在后台并在那里工作。每次我调用main.php时，它们就会堆积越来越多，并且混合越来越多。在这里，我也放置了main.js。

Main.js

// JavaScript Document
$(function(){
  var count= $('.banner-each').length;
  var i = 0;
  var bannertimer = 0;


  //Start timing
  $('#slide-count').width(100+'%');

  //next button banner
  $('#next').click(function(){
    if(i+1<count){
    clearInterval(bannertimer);
    $('.banner-each').eq(i).addClass('rotate');
    $('.banner-each').eq(i).addClass('z');
    $('.banner-each').eq(i+1).show();
    $('.banner-btn').hide();
    $('#slide-count').removeClass('counting');
    $('#slide-count').width(0+'%');
    setTimeout(function(){
      $('.banner-each').eq(i+1).addClass('rotate');
    },1);
    setTimeout(function(){
      $('#slide-count').addClass('counting');
      $('.banner-each').eq(i).hide();
      $('.banner-each').eq(i).removeClass('z');
      $('.banner-each').eq(i+1).removeClass('rotate');
      $('.banner-each').eq(i).removeClass('rotate');
      $('.banner-btn').show();
      $('#slide-count').width(100+'%');
      bannertimer = setInterval(bannertime,5500);
      i++;
    },300);
    } else {
      i = -1;
      $('#next').click();
    }
  });

  //prev button banner
  $('#prev').click(function(){
    if(i>=-(count-1)){
    clearInterval(bannertimer);
    $('.banner-each').eq(i).addClass('rotate');
    $('.banner-each').eq(i).addClass('z');
    $('.banner-each').eq(i-1).show();
    $('.banner-btn').hide();
    $('#slide-count').removeClass('counting');
    $('#slide-count').width(0+'%');
    setTimeout(function(){
      $('.banner-each').eq(i-1).addClass('rotate');
    },1);
    setTimeout(function(){
      $('#slide-count').addClass('counting');
      $('.banner-each').eq(i).hide();
      $('.banner-each').eq(i).removeClass('z');
      $('.banner-each').eq(i-1).removeClass('rotate');
      $('.banner-each').eq(i).removeClass('rotate');
      $('.banner-btn').show();
      $('#slide-count').width(100+'%');
      bannertimer = setInterval(bannertime,5500);
      i--;
    },300);
    } else {
      i = 0;
      $('#prev').click();
    }
  });

  //5sec timer
  function bannertime(){
    $('#next').click();
  }

  bannertimer = setInterval(bannertime,5500);

});

移除并读取后，外部JS混淆了代码

0 个答案: