Geek Answers Handbook

Prevent JavaScript function from executing more than once

I use JavaScript, jQuery and PHP. How to restrict JavaScript function to execute once?

There is Ajax in my MainJQuery file. display.php execute for a while:

.... $.ajax({ type:'POST', url: 'display.php', data:'id='+id , success: function(data){ $("#response").html(data); //Here Get_list should be execute only once. get_list('get'); // Display should execute as usual display(); }//success }); //Ajax .......

The get.Php file writes the value in JavaScript:

 <?php print "<script language='javascript'>"; print " g_cost[g_cost.length]=new Array('STA-VES','East',4500);"; print " g_cost[g_cost.length]=new Array('STA-CRF','West',5400);"; print "</script>"; ?>

My JavaScript function has the following value from PHP:

 function get_list('get'){ for(var i=0;i<g_cost.length;i++) var temp = g_cost[i]; var Name = temp[0]; var direction = temp[1]; var cost = temp[2]; .. some code ... } function display(){ for(var i=0;i<g_cost.length;i++) alert(g_cost.length); var temp = g_cost[i]; alert(temp[0]); alert(temp[1]); alert(temp[2]); }

Is it possible to limit the execution of a JavaScript function in terms of jQuery Ajax success?

+4
source share
6 answers

In jQuery, you can use the .one() function to bind a method that will only execute once. For instance,

 $("#someAnchorId").one("click", function(){ //Ajax method here });

See jQuery one help page .

+10
source

You can replace a function with an empty function - this is essentially the same as the Rene Saarsoo solution, but it looks better:

 var get_list = function(param1, param2, ...) { // your code here get_list = function() {}; };
+5
source

Three options:

  • Set the boolean flag in the global area, set it after a successful start and check it before starting

  • After a successful launch, disable the button (or some control that you use to call the one-time method)

  • A little less preferable, but you can also do a server side check, i.e. call the method every time, but check on the server side. On the other hand, this will ensure data consistency on the server.

+3
source

To create a function that runs only once:

 get_list = (function(){ var counter = 0; return function(param1, param2, ...) { if (counter > 0) { return; } counter++; // your normal function code here }; })();

This is almost the same as using a global variable to keep track of how many times a function is executed, except that instead of a global variable, we create a variable that only the internal function can see. After that, you use get_list like any other function.

Perhaps this can be reorganized into something more general in the prototye function, so it can be used as follows:

 get_list = (function (param1, param2, ...) { ... }).once();
+3
source

The quickest way is to add one extra line to the success declaration:

 $.ajax({ type:'POST', url: 'display.php', data:'id='+id , success: function(data){ if(!arguments.callee.stop){ arguments.callee.stop = true; }else{ return; } $("#response").html(data); //Here Get_list should be execute only once get_list('get'); // display should execute as usual display(); }//success }); //ajax
+1
source

Try disabling the Ajax trigger (link, button, etc.) after a successful call.

Example trigger:

 <a id="ajax_trigger" href="#" onclick="yourAjaxCall(); return false;">Get List</a>

...

 success: function(data){ $("#response").html(data); //Here Get_list should be execute only once get_list('get'); // Some code to disable, or hide #ajax_trigger // in other words, make it unclickable or disappear. $("#ajax_trigger").css('display': 'none'); // IIRC // Display should execute as usual display(); }//success
0
source

More articles:


All Articles