如何只执行一次 Jquery 代码？

Posted 2023-03-06

【中文标题】如何只执行一次 Jquery 代码？

【英文标题】：How to execute Jquery code only once??

【发布时间】：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

【参考方案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 在这种情况下我们如何应用这种技术：***.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() 方法。