如何只执行一次 Jquery 代码？答案

【问题标题】：How to execute Jquery code only once??如何只执行一次 Jquery 代码？
【发布时间】：2014-07-27 09:42:40
【问题描述】：

我有一个 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;
        )};

【问题讨论】：

请提供小提琴。
您可以使用隐藏字段并将其用作计数器。
如果你把一个命名函数放到click handler上，那么在命名函数里面你可以解绑这个handler
我不了解隐藏字段？
api.jquery.com/one

标签： javascript jquery css hide padding

【解决方案1】：

你可以使用 js 闭包来解决这个问题。

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

【讨论】：

【解决方案2】：

使用布尔值作为全局变量，例如

var flag = true;

现在，设置执行前的条件，Like

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

【讨论】：

【解决方案3】：

您可以在所有语言中使用布尔值。

在 jquery 中：

var isFirst = true;

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

【讨论】：

【解决方案4】：

如果您必须只运行一次没有特定事件绑定的通用函数，请使用它。

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

在多次调用的函数中很有用（防止 onclick 事件被多次触发）

【讨论】：

【解决方案5】：

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

【讨论】：

我宁愿用条件语句来解决这个问题，也不愿在同一个元素上绑定两个事件处理程序。
@frosdqy 在这种情况下我们如何应用这种技术：stackoverflow.com/questions/39435451/…

【解决方案6】：

一次使用.one，其他人使用click。检查下面

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

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

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

一些解释：这里需要一个全局的jQuery 变量（在这个例子中是$.first_time），这样它在点击事件的匿名函数中仍然是已知的。

【讨论】：

【解决方案8】：

如果你想限制#SearchButton点击事件只触发一次，使用.one方法

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

【讨论】：

【解决方案9】：

您可以对其进行检查以检查填充顶部。如果不是 6%，则需要设置。如果是，则跳过该行。提示：将 $('#loadingMessage') 的结果放在一个变量中，这样您就不必进行第二次元素查找。

像这样（未测试）：

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

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

这当然是假设您希望每次都执行单击处理程序中的其余代码。否则，您可以在处理程序执行后取消绑定单击。提示：请改用 jQuery on() 和 off() 方法。

【讨论】：