我改编了来自 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 页面:
主要
<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 内容并进入主页。这样您就可以控制 timer保存前一个 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() 的代码每次加载新内容时计时器。这会让你产生重复的计时器，从而导致多个不需要的操作。
有很多可能的原因会导致计时器重复:
加载新内容时，替换内容的事件处理程序可能会被删除，这会阻止先前的计时器被删除。
用于初始化新内容的代码可能会启动一个新的计时器而不停止旧的计时器。
变量可能会被重新初始化，从而覆盖之前的计时器变量。
初始化新加载的内容时，您将添加重复的事件处理程序。您需要在读取新事件处理程序之前删除先前的事件处理程序，或者不需要双重重新初始化内容。
我们必须详细了解 HTML 的布局方式、哪些内容上有事件处理程序以及正在重新加载哪些内容，才能准确了解发生了哪个问题。
关于javascript - 图像旋转脚本在 AJAX 加载时中断，开始旋转得太快，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37513336/