Question

I have a column in my web design, which is periodically refreshed by a JS function “refreshColumn()” and updated by AJAX.

setInterval('refreshColumn()',60000);

function refreshColumn() {
..make call with AJAX and load response to element...
document.getElementById('myColumn').innerHTML = xmlhttp.responseText;
}

This is okay, however, it’s not very practical when my user is actually using that column and it refreshes on them!

Is it possible to modify what I have already, to incorporate an ‘onmouseover’ event that will stop the function from running the AJAX and refreshing the column, and ‘onmouseout’ allows the script to refresh again?

Answer 1

You would use a timeout instead of an interval, and just clear it on mouseover and reset it on mouseout.

Live Demo

var timeout = setTimeout(refreshColumn,60000);

function refreshColumn() {
    // ajax call ect. reset the timeout
    timeout = setTimeout(refreshColumn,60000); 
}

element.onmouseover = function(){
   clearTimeout(timeout);
}

element.onmouseout = function(){
   timeout = setTimeout(refreshColumn,60000); 
}