How to execute Jquery code only once??

Question

I have one jquery method and i used call that method on click of a button . So in that code i have one line " $("#loadingMessage").css('padding-top','6%'); " i need this line execute only once when we call that method first time,later that i gone this line .

So please help me to find one way

the entire method script is below

$('#SearchButton').click(function() {                 
         $(".spinner").css('visibility','hidden');

         $("#loadingMessage").css('padding-top','6%'); //I want this line execute only once, i mean first time

         loaderStart();
         document.getElementById('loadinggif3').style.display = "block";
         $("#loadinggif3").show();
         $(".col-sm-9").css('visibility','hidden');
          var str = $('#SearchText').val();
          str = str.trim();
         if(str=="") return false;
        )};

if you put a named function to click handler, then inside the named function you can unbind the handler — ale, Jun 06 '14 at 07:27

icaru12 · Accepted Answer · 2014-06-06T07:50:32.780

24

Use jQuery .one(). When using .one() method, the event handler function is only run once for each element.

$('#SearchButton').one("click", function () {
    $("#loadingMessage").css('padding-top', '6%');
});

$('#SearchButton').click(function () {
    $(".spinner").css('visibility', 'hidden');

    loaderStart();
    document.getElementById('loadinggif3').style.display = "block";
    $("#loadinggif3").show();
    $(".col-sm-9").css('visibility', 'hidden');
    var str = $('#SearchText').val();
    str = str.trim();
    if (str == "") return false;
});

edited Jun 06 '14 at 07:50

answered Jun 06 '14 at 07:30

icaru12

1,522
16
21

1

i'd rather work it out with conditional statements than binding two event handlers on the same element. – low_rents Jun 06 '14 at 07:36
@frosdqy how can we apply this technique in this case: http://stackoverflow.com/questions/39435451/on-resize-trigger-funciton-once-till-the-condition-is-true-or-false – Syed Sep 12 '16 at 06:31

score 17 · Answer 2 · edited Sep 19 '19 at 14:52

17

Use a boolean as a global variable, like

var flag = true;

Now, set the condition before the execution, Like

if(flag){  
   $("#loadingMessage").css('padding-top','6%');  
   flag=false;  
}

edited Sep 19 '19 at 14:52

Narendra Jadhav

10,052
15
33
44

answered Jun 06 '14 at 07:29

Sudip Pal

2,041
1
13
16

score 8 · Answer 3 · answered Jun 06 '14 at 07:29

8

If you want to restrict #SearchButton click event to fire only once, use .one method

$('#SearchButton').one('click', function() {
  ...
});

answered Jun 06 '14 at 07:29

Fabricator

12,722
2
27
40

low_rents · Answer 4 · 2014-06-06T07:36:49.397

5

quick and 'dirty' solution:

$.first_time = true;
$('#SearchButton').click(function() {                 
    if($.first_time == true) $("#loadingMessage").css('padding-top','6%');
    $.first_time = false;
});

some explanation: you need a global jQuery variable here ($.first_time in this example), so that it's still known inside the anonymous function of the click event.

edited Jun 06 '14 at 07:36

answered Jun 06 '14 at 07:29

low_rents

4,481
3
27
55

score 5 · Answer 5 · answered Nov 19 '15 at 15:08

If you have to run only once a generic function without a particular event binding then use this.

$(document).one('ready', function(){
   // your code
   $("#id").on("click", function() {
        // other code
   });
});

Useful if inside a function that is called many times (prevents onclick event from beein fired many times)

Mr7-itsurdeveloper · Answer 6 · 2014-06-06T07:39:58.513

use .one for once and use click for others.check below

  <script>
    $(document).ready(function() {
    $('#SearchButton').one('click', function() {
         $("#loadingMessage").css('padding-top','6%'); //I want this line execute only once, i mean first time

    });    


$('#SearchButton').click(function() {                 
         $(".spinner").css('visibility','hidden');


         loaderStart();
         document.getElementById('loadinggif3').style.display = "block";
         $("#loadinggif3").show();
         $(".col-sm-9").css('visibility','hidden');
          var str = $('#SearchText').val();
          str = str.trim();
         if(str=="") return false;
        });


  } ); 

       </script>

smallYang · Answer 7 · 2020-08-31T04:00:21.397

2

you can use js closure to slove the question.

function once(func) {
    let isExeced = false;
    return function(...arg) {
        if (isExeced) return void 0;
        isExeced = true;
        func.apply(null, arg)
    }
}

edited Aug 31 '20 at 04:00

answered Jan 14 '19 at 10:20

smallYang

21
2

score 0 · Answer 8 · answered Jun 06 '14 at 07:29

You can put a check around it that checks the padding-top. If it is not 6%, you need to set it. If it is, you skip the line. Tip: put the result of $('#loadingMessage') in a variable so you do not have to do a second element lookup.

Like so (not tested):

$('#SearchButton').click(function() {                 
    var $loadMsg = $("#loadingMessage");

    if($loadMsg.css('padding-top') !== '6%'){
         $loadMsg.css('padding-top', '6%');
    }
});

This is of course assuming that you want to execute the rest of the code in the click handler every time. Otherwise you can just unbind the click after the handler has been executed. Tip: use the jQuery on() and off() methods instead.

score 0 · Answer 9 · answered Oct 01 '18 at 07:05

0

you can use bolean in all languages.

in jquery:

var isFirst = true;

if(isFirst){  
$("#loadingMessage").css('padding-top','6%');  
isFirst=false;  
}

answered Oct 01 '18 at 07:05

Omid Ahmadyani

1,430
13
15

How to execute Jquery code only once??

9 Answers9

Linked