Question

I’m writing a jQuery plugin where the events which start/stop the plugin are customisable, so potentially the same event could both start and stop the plugin (e.g. click to start and click to stop).

What’s an elegant way, ideally not involving timeouts or unbinding and rebinding of listeners (and not too many “isPlaying” “isBeingStarted” flags etc..) to make sure the correct callback is called

Answer 1

The eventual solution I’ve gone for is to do a quick uniqueness test for events used for stopping and starting and if there are any events used for both stopping and starting then a different listener (which does an isPlaying check) is attached to these. There’s a small performance hit on loading the plugin, but after that the event handling code is about as efficient as can be.

function processEvents() {
    var tempStart = opts.startEvent.split(" ").sort(),
        tempStop = opts.stopEvent.split(" ").sort();
    startEventLoop: for(var i=0, il = tempStart.length;i<il;i++) {
        for(var j=0, jl = tempStop.length;j<jl;j++) {
            if(tempStart[i] == tempStop[j]) {
                stopStartEvents.push(tempStart[i])
                tempStop.splice(j,1);
                continue startEventLoop;
            }
        }
        startEvents.push(tempStart[i])
    }
    startEvents = startEvents.join(" ");
    stopEvents = tempStop.join(" ");
    stopStartEvents = stopStartEvents.join(" ");
}

    $this.on(stopEvents, function() {
        $this.trigger("stop.flickBook");
    }).on(startEvents, function() {
        $this.trigger("start.flickBook");
    }).on(stopStartEvents, function() {
        playing ? $this.trigger("stop.flickBook") : $this.trigger("start.flickBook");
    });