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

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

我有一个主页面(main.php)和一个按钮，该按钮将把一个页面(ajax.php)加载到main.php上的div容器中。图像旋转的代码位于ajax.php页面的$(document).ready(function()部分中。下面是此代码。

当页面第一次加载时，一切正常，图像每1000ms旋转一次。如果我点击加载ajax.php的按钮放入一组新的旋转图像，它会连续加载两张图像，等待1000ms，加载两张图片，等等。如果我第三次点击，它会依次加载三张图像，等1000ms，等等。你知道问题发生在哪里吗？谢谢

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

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

主要

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

由于披露了更多代码，因此进行编辑

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

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

然后，你可以这样做：

<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是如何布局的，哪些内容上有事件处理程序，以及正在重新加载哪些内容，才能确切地知道发生了哪个问题。

相关内容

最新更新

热门标签：