How to execute jQuery code only once?

Question

I have one jquery method, and I used this method when I clicked a button. So in this code I have one line " $("#loadingMessage").css('padding-top','6%');" I need this line to be executed only once, when we call this method for the first time, later when I left this line.

So please help me find one way

whole script method 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;
        )};

Answer 1

Use jQuery.one () . When using the .one () method, the event handler function runs only 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;
});

Answer 2

,

var flag = true;

, ,

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

Answer 3

clickSearchButton click , .one

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

Answer 4

, .

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

, , ( onclick beein)

Answer 5

"" :

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

- : jQuery ($.first_time ), click.

Answer 6

click others.check

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

Answer 7

js closure, .

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

Answer 8

.

jquery:

var isFirst = true;

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

Answer 9

, . 6%, . , . . $('# loadingMessage') , .

( ):

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

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

This, of course, assumes that you want to execute the rest of the code in the click handler each time. Otherwise, you can simply cancel the click after executing the handler. Tip. Use jQuery on () and off () methods instead.