Undo last executed function with jquery

Question

It is possible to cancel the execution of the last function called. For example, I click

<nav><a href="foo">...</a></nav> 

It has an onclick-listener, something like this:

 $(function() { $('nav a').on('click', function() { $('nav a').removeClass('active'); $(this).addClass('active'); $($(this).attr('href')).addClass('active'); return false; }); }); 

I am looking for something with this, I can cancel the execution of the last function. Any suggestion? Thanks!!!:)

Answer 1

Use a command template , i.e.

Command objects are useful for implementing multi-level cancellation - if all user actions in the program are implemented as command objects, the program can store a stack of the last executed commands. When the user wants to cancel the command, the program simply retrieves the most recent command object and executes its undo () method.

A basic JavaScript implementation might look like this:

 function command(instance) { this.command = instance; this.done = []; this.execute = function execute() { this.command.execute(); this.done.push(this.command); }; this.undo = function undo() { var command = this.done.pop(); command.undo(); }; } 

To verify this, create a simple DOM:

 <ul> <li>first</li> </ul> 

and define the command object you want to use. Such an object should contain execution logic along with additional behavior to restore the previous state of your DOM (at least in our example):

 var appendcommand = new command({ execute: function(){ $('ul').append('<li>new</li>'); }, undo: function(){ $('ul li:last').remove(); } }); 

After execution:

 appendcommand.execute(); 

your page will change from

• first

in

• first
• new

at execution:

 appendcommand.undo(); 

converts this page to its original state:

• first

Answer 2

JavaScript engines do not save any previous states for you, you need to do it yourself. This means that you need to track the previous and current states of the objects you want to manipulate.

In your case, you may have a list of "previously active" objects, and your "cancel" will then activate the previous item based on this list.

I have not tried the code, but you should get this idea. Also check out http://www.w3schools.com/jsref/jsref_obj_array.asp if you are having problems with arrays.

 var undoList = new Array(); function manipulate(elem) { $('nav a').removeClass('active'); $(elem).addClass('active'); //... } function undo() { if(undoList.length > 0) { var elemToManipulate = undoList.pop(); manipulate(elemToManipulate); } } function manipulateWithUndo(elem) { undoList.push(elem); manipulate(elem); } 

Answer 3

Try the following:

 var active=0; if(active==0) { //write here your code active=1; }else { //write here your "undo" code //example: Write your code but in reverse order: addclass().removeclass().removeclass() active=0; } 

Answer 4

 $('nav a').unbind() 

http://api.jquery.com/unbind/

- or -

 $('nav a').off() 

http://api.jquery.com/off/

Answer 5

  var clk=1; $(document).ready(function(){ $("button").on('click',function(){ if(clk%2==1){ $('#sidebar').addClass('active'); $(".main").css("display", "flex"); }else{ $('#sidebar').removeClass('active'); $(".main").css("display", ""); } clk++; }); });