stopping a function after first click, to prevent more executions

Question

I have this function

        function display() {
        $.ajax({
            url: "new.php",
            type: "POST",
            data: {
                textval: $("#hil").val(),

            },
            success: function(data) {
                $('.daily').html(data);
            }

        });
    }

and it serves its purpose, the only problem is, a user can click on <a href="#" onclick="display();"></a> for as many times as possible, and it will send just as many requests to new.php. What I want is to restrict this to just 1 click and maybe till the next page refresh or cache clear.

just set a global var (or a cookie?) `onceClicked` to true, check for it beeing false on every call of function `display` — Jeff, Apr 30 '17 at 08:54
Maybe you could disable the link after the first call ? You can achieve this in css, and visually it will tell the user this is disabled, better ux. Refer to this link : http://stackoverflow.com/a/10276157/5907475 — Lucas Delobelle, Apr 30 '17 at 09:01

score 1 · Answer 1 · answered Apr 30 '17 at 09:00

This should do what you want:
Set a global var, that stores if the function already was called/executed.

onceClicked=false;

function display() {
    if(!onceClicked) {
      onceClicked=true;

      $.ajax({
        url: "new.php",
        type: "POST",
        data: {
            textval: $("#hil").val(),

        },
        success: function(data) {
            $('.daily').html(data);
        }

      });
    }
}

score 1 · Accepted Answer · answered Apr 30 '17 at 09:07

Simple example would be :

<script>
var exec=true;
function display() {
    if(exec){
        alert("test");
        exec=false;
    }
}
</script>

<button onclick="javascript:display();">Click</button>

In your case it would be :

var exec=true;
function display() {
    if(exec){
        $.ajax({
            url: "new.php",
            type: "POST",
            data: {
                textval: $("#hil").val(),

            },
            success: function(data) {
                $('.daily').html(data);
                exec=false;
            }

        });
    }
}

score 0 · Answer 3 · answered Apr 30 '17 at 08:56

0

During onclick, set a boolean flag to true to indicate that user clicked the link before invoking the display() function. Inside the display() function, check the boolean flag and continue only if it is true. Reset the flag to false after the AJAX completed processing (successful or failed).

answered Apr 30 '17 at 08:56

bboy

36
7

I do not have enough reputation to add comment to other answers, so add it here. The sample code currently in some of the other answers missed handling of failure case. – bboy Apr 30 '17 at 09:47

score 0 · Answer 4 · answered Apr 30 '17 at 09:03

You can use Lock variable like below.

var lock = false;
function display() {
        if (lock == true) {
            return;
        }
        lock = true;
        $.ajax({
            url: "new.php",
            type: "POST",
            data: {
                textval: $("#hil").val(),
        },
        success: function (data) {
            $('.daily').html(data);
            lock = false;
        }
    });
}

score 0 · Answer 5 · answered Apr 30 '17 at 09:04

you can implement this with that way too

$(function() {
  $('#link').one('click', function() {
    alert('your execution one occured');
    $(this).removeAttr('onclick');
    $(this).removeAttr('href');
  });
});

function display(){

alert('your execution two occured');

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a  href="#" onclick="display();" id='link'>Have you only one chance</a>

stopping a function after first click, to prevent more executions

5 Answers5