Preventing to execute a JavaScript function more than once

Question

I am using JavaScript, jQuery and PHP. How do I limit the JavaScript function to execute once?

My MainJQuery file has Ajax. 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

.......

get.Php file writes a value to 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 to execute a JavaScript function in the jQuery Ajax success portion?

Possible duplicate of Run javascript function only once

Basilevs
– Basilevs

2016-01-08 08:15:30 +00:00
Commented Jan 8, 2016 at 8:15 — Basilevs
– Basilevs, Commented Jan 8, 2016 at 8:15

Peter Mortensen · Accepted Answer · 2013-03-01 20:28:43Z

10

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

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

See jQuery one help topic.

edited Mar 1, 2013 at 20:28

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 11, 2009 at 14:26

redsquare

78.8k21 gold badges155 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

weirdan · Accepted Answer · 2010-09-17 13:14:43Z

5

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

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

answered Sep 17, 2010 at 13:14

weirdan

2,67725 silver badges28 bronze badges

2 Comments

jmav Over a year ago

in section "// your code here" you leave code that will run once, in subfunction you put code to run every time.

CMCDragonkai Over a year ago

Better to do get_list = Function(''); Prevents memory leaks.

Yuval Adam · Accepted Answer · 2009-01-11 10:48:31Z

3

Three options:

Set a boolean flag in global scope, set it after a successful run, and check it before running
After a successful run, disable the button (or whatever control you are using to call the one-time method)
Slightly less preferred, but you can also do the validation on server side, i.e. call the method each time, but validate on server-side. The up side is that this will ensure data consistency on the server.

answered Jan 11, 2009 at 10:48

Yuval Adam

166k95 gold badges318 silver badges407 bronze badges

1 Comment

Rene Saarsoo Over a year ago

Introducing global variable is a bad idea.

Rene Saarsoo · Accepted Answer · 2009-01-11 13:21:52Z

3

To create a function that executes 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 for tracking how many times function is executed, except that instead of a global variable we create a variable, that only the inner function can see. After that you use it get_list as any other function.

This could probably be refactored into something more general in function prototye, so it could be used like this:

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

answered Jan 11, 2009 at 13:21

Rene Saarsoo

14k10 gold badges63 silver badges91 bronze badges

Comments

tableton · Accepted Answer · 2009-01-12 14:43:34Z

1

Fastest way is to add one extra line to 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

answered Jan 12, 2009 at 14:43

tableton

Comments

Peter Mortensen · Accepted Answer · 2013-03-01 20:30:12Z

0

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

Example of a 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

edited Mar 1, 2013 at 20:30

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 11, 2009 at 10:45

andyk

10k10 gold badges39 silver badges42 bronze badges

Collectives™ on Stack Overflow

Preventing to execute a JavaScript function more than once

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related