Question

I have a jquery ajax function:

function posts()
{
 pfunc = $.ajax({
         url: 'backend/posts.php',
         success: function(data) {
            $('#posts').html(data);
            $('#posts').fadeIn(2000);
            setTimeout(posts,2000);
        }
        });
}
posts();

And I want to stop the function when a user hovers over the div ‘Posts’ and resume when the user stops hovering over that div. Is there any way I could do that.

Thanks

Answer 1

Here you go 🙂

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function posts()
{
 pfunc = $.ajax({
         url: 'backend/posts.php',
         success: function(data) {
            $('#posts').html(data);
            $('#posts').fadeIn(2000);
            timer = setTimeout(posts,2000);

        }
        });
}
posts();
$(document).ready(function(){
$('#posts').hover(function(){clearTimeout(timer);}, function(){setTimeout(posts,2000);});
});
</script>
<div id = 'posts'></div>

Basically I added a mouser-over and mouse-out event handlers to the #post div which will clear and reset the timeouts respectively..