I adapted an image rotation script from here.
I have a main page (main.php), and a button that will load a page (ajax.php) into a div container on main.php. The code for image rotation is placed inside $(document).ready(function() section of the ajax.php page. This code is below.
When the page first loads, it is okay and the images are rotating once every 1000ms. If I click the button to the load ajax.php to put in a new rotating set of images, it loads two images in succession, waits 1000ms, loads two images, etc. If I click a third time, it will load three images in succession, wait 1000ms, etc. Do you have an idea where the problem is occurring? Thanks.
Just an edit - if I put a comment inside the mouseleave function I see it will get called multiple times when the problem occurs, so it could be the .mouseleave(); code at the very end causing problems?
Edit2: I have added new code snippets. One from the main.php and two from the ajax.php page:
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>
Edit since more code has been disclosed
The issue looks like it is a problem with stopping the prior setInterval(). The event handlers that would normally stop it are wiped and so it keeps going forever. And, because it's inside a $(document).ready() callback function scope, you can't get to it to manually clear it.
I think the best way to fix it is to move the slide <script> out of PHP content and into the main page. That will then give you control over the timer variable that holds the previous setInterval() timerID so you can clear the old one before re-initializing the new content.
Then, you can do this:
<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>
Original answer
You are apparently rerunning code that sets up new setInterval() timers each time you load new content. That gets you duplicate timers that cause the multiple unwanted actions.
There are a bunch of possible causes for how you could end up with a duplicate timer:
An event handler on replaced content may be getting removed when the new content is loaded and that keeps a prior timer from getting removed.
Code for initializing the new content may be starting a new timer without stopping an old one.
A variable may be getting re-initialized, thus overwriting the previous timer variable.
When you initialize the newly loaded content, you add duplicate event handlers. You need to either remove prior event handlers before readding new event handler or you need to not doubly reinitialize the content.
We would have to see more about how the HTML is laid out, what content has event handlers on it and what content is being reloaded to know exactly which problem is occurring.