Timeout JavaScript function after being clicked

Question

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.

To note: there is nothing stopping a user from taking your code as shown, and simply looping it 10000 times. For example: for(var i = 0; i < 10000; i++)$('#dj_status').load('inc/dj_status_frame.php');. This could be run from the console of your webpage. It is very important that you are addressing these concerns server side and not client side, as the client cannot be trusted, not even their calls. Further, a DDoS is usually done from a large multitude of IP's that just spam requests; they don't tend to interact with pages at all if it cannot be easily automated. — Travis J
– Travis J, Commented Mar 25, 2016 at 21:31

Karl Galvez · Accepted Answer · 2016-03-25 21:20:14Z

1

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.

edited Mar 25, 2016 at 21:20

answered Mar 25, 2016 at 21:02

Karl Galvez

8436 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bobby J. Over a year ago

Seems like a good script you got there. However, I'm not too far with javascript yet and might be a noob question but how would I be able to use it with my script?

Karl Galvez Over a year ago

Implementation of debouce for you would be debounce(djrefresh,30000) where you are currently calling djrefresh

Travis J · Accepted Answer · 2016-03-25 21:27:11Z

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;
 }
})()

Collectives™ on Stack Overflow

Timeout JavaScript function after being clicked

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related