Count the number of mouse clicks in one second

Question

Hi I'm working on an application that I want to improve the performance.(I know the question is kinda lengthy one- I apologize.)

I will explain in detail its a bidding application that uses only qtscript/qscript(kinda javascript) and no html.

When a user click on a Button, I want to point to a text field(For a normal user its okay like -1 or 2 clicks per second). But the user crazily click on button(5 -10 clicks per second - yeah some people click like that), it decreases the performance like the amount take delay to display because every click it points to focus on text field.

I'm thinking of some work around like if the user clicks more than 3 times in 1 second we call the focus function only after the last click- I don't know this is a right solution if you guys know anything better please suggest. Another problem is I can't use setInterval() and clearInterval().

Any help would be greatly appreciated.

Answer 1

I would take a look at Underscore.js's _.throttle function.

_.throttle = function(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  options || (options = {});
  var later = function() {
    previous = options.leading === false ? 0 : new Date;
    timeout = null;
    result = func.apply(context, args);
  };
  return function() {
    var now = new Date;
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0) {
      clearTimeout(timeout);
      timeout = null;
      previous = now;
      result = func.apply(context, args);
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

It looks really complex, but a basic example would be:

var func = function(){alert("Only do this once every second");},
    throttled = _.throttle(func, 1000);

// Call func() three times in under a second, and
// you get 3 message boxes
func(); // alerts
func(); // alerts
func(); // alerts

// Call throttled() three times in under a second, and
// you only get a message box the first time
func(); // alerts
throttled(); // does nothing
throttled(); // does nothing

// ... wait >1 second ...
func(); // alerts
throttled(); // does nothing
throttled(); // does nothing