图像旋转脚本在AJAX负载下中断，开始旋转过快。

Question

我从here改编了一个图像旋转脚本。

我有一个主页( main.php )和一个将页面(ajax.php)加载到main.php上的div容器的按钮。图像旋转代码放置在$(document).ready(function()页面的ajax.php部分中。这段代码在下面。

当页面第一次加载时，它是可以的，图像每1000毫秒旋转一次。如果我单击load ajax.php的按钮放入一个新的旋转图像集，它会依次加载两个图像，等待1000 is，加载两个图像等等。如果我第三次单击，它将连续加载三个图像，等待1000 is等。您知道问题在哪里发生吗？谢谢。

只是一个编辑--如果我在mouseleave函数中添加一个注释，那么当问题发生时，它会被多次调用，所以它可能是最后的.mouseleave();代码导致了问题吗？

Edit2:我添加了新的代码片段。一个来自main.php，两个来自ajax.php页面：

MAIN

<link rel="stylesheet" href="css/classic.css" type="text/css" />

<style>
#main-content {
  width: 1000px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -380px;
}
</style>

</head>

<body>


<div>
    <button id="main-button">Get Random Content</button>
</div>

<div style="clear: both"></div>


<div id="main-content"></div>

</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script></script><script src="jquery.jeditable.js" type="text/javascript" charset="utf-8"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script><script src="jquery-ui.js"></script>


<script>
$(document).ready(function() {
  $("#main-content").load("test1_slide.php");

  $("#main-button").click(function() {
    $("#main-content").load("test1_slide.php");
  });
});

</script>


</body>
</html>

阿贾克斯

<style>
#slide img {
    position: absolute;
    display: block;
}
#slide {
    position: relative;
}
</style>

<?php
echo '<div id="slide">';
for ($i = 0; $i < 15; $i++) {
    echo '<img src="http://placehold.it/350x150?text='.$i.'">';
}
echo '</div>';
?>

<script>
$(document).ready(function() {

    var timer;


    // adapted from http://jsfiddle.net/didierg/Cvxe2/
    $("#slide > img:gt(0)").hide();
    $("#slide")
        .mouseenter(function() {
            if (timer) {
                clearInterval(timer);

            }
        })
        .mouseleave(function() {
            timer = setInterval(function() {
                $("#slide > img:first")
                    .fadeOut(0)
                    .next()
                    .fadeIn(0)
                    .end()
                    .appendTo("#slide");
                console.log("test");
            }, 1000);
        })
        .mouseleave();



});
</script>

Answer 1

编辑，因为更多的代码已经被披露，

这个问题看起来是一个问题，停止先前的setInterval()。通常会停止它的事件处理程序将被删除，因此它将永远运行。而且，由于它位于$(document).ready()回调函数范围内，所以无法手动清除它。

我认为修复它的最好方法是将幻灯片<script>从PHP中移出并放到主页中。这样，您就可以控制包含上一个setInterval() timerID的setInterval()变量，以便在重新初始化新内容之前清除旧的timerID。

然后，你可以这样做：

<script>
$(document).ready(function() {

var timer;

function initializeSlide() {
    clearInterval(timer);
    // adapted from http://jsfiddle.net/didierg/Cvxe2/
    $("#slide > img:gt(0)").hide();
    $("#slide")
        .mouseenter(function() {
            if (timer) {
                clearInterval(timer);

            }
        })
        .mouseleave(function() {
            timer = setInterval(function() {
                $("#slide > img:first")
                    .fadeOut(0)
                    .next()
                    .fadeIn(0)
                    .end()
                    .appendTo("#slide");
                console.log("test");
            }, 1000);
        })
        .mouseleave();
}

$("#main-button").click(function() {
    $("#main-content").load("test1_slide.php");
    initializeSlide();
  }).click();
});

</script>

原始答案

您显然是在重新运行代码，每次加载新内容时都会设置新的setInterval()计时器。这会使您复制导致多个不需要的操作的计时器。

造成重复计时器的原因有很多：

1. 当加载新内容时，替换内容上的事件处理程序可能会被移除，这会阻止先前的计时器被删除。
2. 初始化新内容的代码可能是启动新计时器而不停止旧计时器。
3. 变量可能会重新初始化，从而覆盖前一个计时器变量.
4. 初始化新加载的内容时，添加重复的事件处理程序。您需要在读取新事件处理程序之前删除以前的事件处理程序，或者不需要加倍地重新初始化内容。

我们需要更多地了解HTML是如何布局的，其中有哪些内容有事件处理程序，哪些内容正在重新加载，才能确切地知道发生了哪些问题。