Question

I have a situation where I need to use jQuery’s $.fn.one() function for a click event, but I don’t want it to apply to the next occurrence of the event (like it usually does), I want it to apply to the occurrence immediately after that, and then unbind itself (like .one() normally does).

The reason I don’t want .one() to apply to the first occurrence is because I’m binding to the document from an event handler invoked earlier in the bubbling phase, so the first time it gets to document it’ll be part of the same event. I want to know when the very next click event occurs.

Note: I do not want to use .stopPropagation() because it will potentially break other parts of my app.

Here are the two options I’ve come up with, though it seems like there must be a more elegant solution.

The double bind method:

$(document).one('click', function() {
  $(document).one('click', callback);
});

The setTimeout method:

setTimeout(function() {
  $(document).one('click', callback);
}, 1);

Both methods work just fine, but here’s my question. I have no idea what the performance implications are for either setTimeout or frequent event binding and unbinding. If anyone knows, I’d love to hear it. But more importantly, I’d like some suggestions on how to measure this stuff myself for future situations like this.

I love sites like http://jsperf.com, but I don’t know if it would really be helpful for measuring stuff like this.

And obviously, if someone sees a much better solution, I’ve love to hear it.

Answer 1

I find the double-bind method quite elegant – I think it accurately reflects your actual intent, and it only takes two lines of code.

But another approach is rather than using .one() you could use .on() and update the event object associated with the first event, adding a flag so that the callback will ignore the first time it is called:

function oneCallback(e) {
    if (e.originalEvent.firstTimeIn)
        return;

    alert("This is the one after the current event");
    $(document).off("click", oneCallback);
}

$("div.source").click(function(e) {
    e.originalEvent.firstTimeIn = true;
    $(document).on("click", oneCallback);   
});

Demo: http://jsfiddle.net/q5LG4/

EDIT: To address your concerns about not modifying the event object (or any object you don’t own) you could store a firstTime flag in a closure. Here’s a rather dodgy .oneAfterThis() plugin that takes that approach:

jQuery.fn.oneAfterThis = function(eventName, callback) {
    this.each(function() {
        var first = true;
        function cb() {
            if(first){
                first = false;
                return;
            }
            callback.apply(this,[].slice.call(arguments));
            $(this).off(eventName,cb);
        }
        $(this).on(eventName, cb);
    });
};

$(someseletor).oneAfterThis("click", function() { ... });

I’m sure that could’ve done that more elegantly (perhaps I should’ve bothered to look at how jQuery implements .one()), but I just wanted to whip something up quickly as a proof of concept.

Demo: http://jsfiddle.net/q5LG4/1/