CODEWITHSUNDEEP
javascriptjqueryajax
Bobby J.
Bobby J.

Reputation: 71

Timeout JavaScript function after being clicked

I have replaced the iframes on my website with AJAX. It's a lot better now and a lot faster. People can click the refresh button to refresh the dynamic areas.

I am using this function for that:

function djrefresh() {
    $('#dj_status').load('inc/dj_status_frame.php');
    $('#djbanner').load('inc/djbanner.php');
    $('#djknopjes').load('inc/dj_knopjes_frame.php');
    $('#djzegt').load('inc/dj_zegt_frame.php');
    $('#djfooter').load('inc/footer_frame.php');
    $('#berichtenbalkframe').load('inc/berichtenbalk_frame.php');
}

Works perfectly fine, but my site needs to load a lot of stuff all at once. I want the user to be able to click it once and get a timeout for 30 seconds.

... or if you have a better idea please tell me. I don't want the user to DDOS my website with my own scripts. Thanks in advance.

Upvotes: 0

Views: 51

Answers (2)

Travis J
Travis J

Reputation: 82337

Just create a count of the calls, use a callback on the calls, if the load has finished on all of them then allow the function to continue.

var djrefresh;

//close values to reduce variable name collision
(function(){
 var locked = false;
 var callcount = 0;
 djrefresh = function() {
  if( locked ) return;
  locked = true;
  $('#dj_status').load('inc/dj_status_frame.php',unlock);
  $('#djbanner').load('inc/djbanner.php',unlock);
  $('#djknopjes').load('inc/dj_knopjes_frame.php',unlock);
  $('#djzegt').load('inc/dj_zegt_frame.php',unlock);
  $('#djfooter').load('inc/footer_frame.php',unlock);
  $('#berichtenbalkframe').load('inc/berichtenbalk_frame.php',unlock);
 }
 function unlock(){
  if( ++callcount == 6 ) locked = false;
 }
})()

Upvotes: 0

Karl Galvez
Karl Galvez

Reputation: 843

Changing your sites arcitcture is probably the best option, but without more information it's difficult to give any recommendations. Anyhow, to limit calls to djrefresh you can use a debounce function. UnderscoreJS includes the function or you can write one yourself. 

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

This is taken from https://davidwalsh.name/javascript-debounce-function (I've used it quite a bit personally).
This assumes the "refresh button" is a button the page, not the browser refresh.
Edit: If you do have a refresh button on your site, it would be simpler to just disable it for 30 seconds after it has been clicked.

Upvotes: 1

Related Questions