How to make the jQuery toggle function in pure javascript?

Question

I found out a little while ago and found very interesting toggle function using functions:

$('body').toggle(
    function(){
        alert('A')
    }, function(){
        alert('B')
    }
);

(In the example I put only 2 functions, I wanted with several)

I tried to do in javascript but I couldn’t (I even looked at the jquery, but there is very complicated).

Explanation:

Since the toggle function will not use DOM elements, it could work by strings:

toggle('D', fn, fn, fn);

so every time D is mentioned in arguments[0] it will perform one function at a time of the array D (D is an array of functions), if it does not exist D it creates a new array with the functions passed to the toggle() and works normally. (In jQuery they do this with date in the elements).

Answer 1

Just keep a circular counter, which picks up the next event from a list each time the element is clicked:

function toggle() {
    var eventos = arguments;
    var contador = -1;
    return function() {
        contador = (contador + 1) % eventos.length;
        eventos[contador].apply(this, arguments);
    };
}

// Exemplo de uso:
document.getElementsByTagName("body")[0].onclick = toggle(
    function() { alert("A"); }, 
    function() { alert("B"); }, 
    ...
);

Example in jsFiddle. It is good to have an alternative implementation, since this method modality .toggle is obsolete (and has been removed in recent versions of jQuery).

Notes:

1. I chose to increment the counter before to call the function, in case it throws an exception the method does not get "stuck" on a single item...

2. The suggested implementation is very generic and can be used for other things besides the event onclick. How she passes it on this and arguments for each item in the list, it can be used in place of any function with any signature.

---

Updating: from what I understood after the question was edited (it’s not clear to me what you want), you want the function to switch between the arguments in the list whenever it is called with the first identical argument, is that it? If it is, I believe there is no alternative but to store your "function map" in a global:

var funcoesToggle = { };
function toggle(qual) {
    if ( !funcoesToggle[qual] )
        funcoesToggle[qual] = { 
            contador: -1,
            funcoes: Array.prototype.slice.call(arguments, 1, arguments.length)
        };

    var escolhido = funcoesToggle[qual];
    escolhido.contador = (escolhido.contador + 1) % escolhido.funcoes.length;
    escolhido.funcoes[escolhido.contador]();
}

// Exemplo de uso:
toggle("D", function() { alert("A"); }, function() { alert("B"); }, function() { alert("C"); }); // A
toggle("D", function() { alert("A"); }, function() { alert("B"); }, function() { alert("C"); }); // B
toggle("Ee", function() { alert("A"); }, function() { alert("B"); }, function() { alert("C"); }); // A
toggle("D", function() { alert("A"); }, function() { alert("B"); }, function() { alert("C"); }); // C
toggle("Ee", function() { alert("A"); }, function() { alert("B"); }, function() { alert("C"); }); // B

Example in jsFiddle. Note that only the first time you use a string is that you need to pass the list of functions, in the following just call with a single argument (although this takes a little the purpose of the function, right?) Anyway, I highly recommend use the original answer code - it is clearer, not "mix responsibilities" (i.e. create a list of functions for "toggle" / use this list of functions).

Answer 2

in Jquery would be this:

$('body').toggle(
    function(){
        alert('A')
    }, function(){
        alert('B')
    }, function(){
        alert('C')
    }, function(){
        alert('D')
    }
);

That is, several functions assigned to the body of your document following an execution order.

But you want in pure Javascript, I took advantage and also provided you a choice of order possible, which would be in the case by changing the function parameter toggle() of functions A,B,C, and D you could do whatever order you want, or repeat some function without having to include equal functions again.

That would be the toggle function:

function toggle(aryFunctions,idx){
    document.getElementsByTagName("body")[0].onclick = aryFunctions[idx];
}

And to use we declare an array of functions:

function A(){
  alert('A');
  toggle(aryFunctions,1);
}
function B(){
  alert('B');
  toggle(aryFunctions,2);
}
function C(){
  alert('C');
  toggle(aryFunctions,3);
}
function D(){
  alert('D');
  toggle(aryFunctions,0);
}
var aryFunctions = [A,B,C,D];

document.body.setAttribute("onclick","toggle(aryFunctions,0)");

Thus would execute:

A,B,C,D

It would be the correct circular shape in order, and I’m assigning the click to the tag <body> of your html so not using DOM.

You can change the order dynamically by changing the code of the past functions.

You can also facilitate your job of adding functions dynamically by placing them on aryFunctions which would be an Array making your work much easier in this regard.

See, if I change the array functions to:

function A(){
  alert('A');
  toggle(aryFunctions,3);
}
function B(){
  alert('B');
  toggle(aryFunctions,2);
}
function C(){
  alert('C');
  toggle(aryFunctions,0);
}
function D(){
  alert('D');
  toggle(aryFunctions,1);
}
var aryFunctions = [A,B,C,D];

document.body.setAttribute("onclick","toggle(aryFunctions,0)");

Thus would execute:

A,D,B,C

This way you have enough freedom to do the such toggle() however you prefer.