如何只执行一次Jquery代码？

Question

我有一个jquery方法,我使用单击按钮调用该方法.所以在那个代码中我有一行" $("#loadingMessage").css('padding-top','6%');"我需要这行只在我们第一次调用该方法时执行一次,之后我就离开了这一行.

所以请帮助我找到一种方法

整个方法脚本如下

$('#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

使用jQuery .one().使用.one()方法时,事件处理函数仅对每个元素运行一次.

$('#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;

现在,在执行之前设置条件,Like

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

Answer 3

如果要限制#SearchButton click事件仅触发一次,请使用.one方法

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

Answer 4

快速而“肮脏”的解决方案：

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

一些解释：这里需要一个全局jQuery变量（$.first_time在本例中），以便在单击事件的匿名函数中仍然知道它。

Answer 5

如果您只需要在没有特定事件绑定的情况下仅运行一次泛型函数，请使用此函数。

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

如果在一个函数内被多次调用很有用（防止beein多次触发onclick事件）