Question

I have a page that the function is to refresh div tag.
Div tag function is refresh the data will receive.

So far that’s ok.

When I block the text using mouse, that’s will clear the block text based on timing “20000”. This below the JS script function.

<script src='js/jquery.min.js'></script>
<script>
    $(document).ready(function()
    {
        $("#content2").load("post_rf.php");
        var refreshId = setInterval(function()
        {
            $("#content2").load('post_rf.php?randval='+ Math.random());
        }, 20000);
        $.ajaxSetup({ cache: false });
    });
    </script>

What I want to do is, how to keep the block text in div refresh function ?
Because some user maybe want to copy the text. In this case, user must quickly copy the text before div refresh.

Maybe the example like facebook post live update.

Answer 1

You want to assign your interval to a variable, when user mouse overs your DIV then use clearInterval, when mouse out setInterval again.

var interval;

$(div).bind("mouseout", function() {
    interval = setInterval(refresh, 1000);
});

$(div).bind("mouseover", function() {
    clearInterval(interval);
});

EDIT

Sorry I posted that on a phone and it’s hard to write code that way, try this:

<script src='js/jquery.min.js'></script>
<script>
    $(document).ready(function() {
        $("#content2").load("post_rf.php");

        // set your initial interval to kick it off
        var refreshInterval = setInterval(function() {
            $("#content2").load('post_rf.php?randval='+ Math.random());
        }, 20000);

        // bind an event to mouseout of your DIV to kickstart the interval again
        $("#content2").bind("mouseout", function() {
            refreshInterval = setInterval(function() {
                $("#content2").load('post_rf.php?randval='+ Math.random());
            }, 20000);
        });

        // clear the interval on mouseover of your DIV to stop the refresh
        $("#content2").bind("mouseover", function() {
            clearInterval(refreshInterval);
        });

        $.ajaxSetup({ cache: false });
    });
</script>