How to execute Jquery code only once??

问题

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;
        )};

回答1:

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;
});

回答2:

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;  
}

回答3:

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

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

回答4:

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)

回答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.

回答6:

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>  

回答7:

you can use js closure to slove the question.

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

回答8:

you can use bolean in all languages.

in jquery:

var isFirst = true;

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

回答9:

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.

来源：https://stackoverflow.com/questions/24076422/how-to-execute-jquery-code-only-once