如何只执行一次Jquery代码?

How to execute Jquery code only once??

本文关键字：一次 Jquery 代码 执行      更新时间：2023-09-26

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

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

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

var flag = true;

现在，在执行前设置条件，如

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

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

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

快速解决方案:

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

一些解释:你需要一个全局的jQuery变量在这里($.first_time在这个例子中)，所以它仍然是已知的匿名函数的点击事件

如果你只需要运行一次泛型函数而不需要特定的事件绑定，那么就使用这个。

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

在被多次调用的函数内部(防止onclick事件被多次触发)

一次使用。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>

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

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

你可以在它周围加一个复选框来检查padding-top。如果不是6%，则需要设置。如果是，你就跳过这条线。提示:将$('#loadingMessage')的结果放在变量中，这样您就不必进行第二次元素查找了。

Like so (not test):

$('#SearchButton').click(function() {                 
    var $loadMsg = $("#loadingMessage");
    if($loadMsg.css('padding-top') !== '6%'){
         $loadMsg.css('padding-top', '6%');
    }
});

当然，这是假设您希望每次都执行click处理程序中的其余代码。否则，您可以在处理程序执行后解除对click的绑定。提示:请使用jQuery的on()和off()方法。

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

在jquery: 

var isFirst = true;
if(isFirst){  
$("#loadingMessage").css('padding-top','6%');  
isFirst=false;  
}
相关文章：