Question

我改编了here的图像旋转脚本。

我有一个主页面（main.php），以及一个将页面（ajax.php）加载到main.php上的div容器中的按钮。图像旋转的代码放在ajax.php页面的$(document).ready(function()部分内。此代码如下。

首页加载时，没关系，图像每1000毫秒旋转一次。如果我单击按钮加载ajax.php以放入一组新的旋转图像，它会连续加载两个图像，等待1000毫秒，加载两个图像等。如果我第三次点击，它将加载三个图像继承，等待1000毫秒等等。你知道问题出在哪里吗？感谢。

只是编辑 - 如果我在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>

AJAX

<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内容并进入主页面。然后，您可以控制保存前一个timer timerID的setInterval()变量，以便在重新初始化新内容之前清除旧的。{/ p>

然后，你可以这样做：

<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()计时器的代码。这会导致重复的计时器导致多个不需要的操作。

有很多可能的原因导致您最终得到重复的计时器：

在加载新内容时，可能会删除替换内容上的事件处理程序，这会阻止先前的计时器被删除。
初始化新内容的代码可能是在不停止旧内容的情况下启动新计时器。
变量可能会重新初始化，从而覆盖之前的计时器变量。
初始化新加载的内容时，添加重复的事件处理程序。您需要在读取新事件处理程序之前删除先前的事件处理程序，或者您不需要双重重新初始化内容。

我们必须看到更多关于如何布局HTML，哪些内容包含事件处理程序以及正在重新加载哪些内容以确切知道正在发生的问题。

AJAX加载时图像旋转脚本中断，开始旋转太快

1 个答案: