web-dev-qa-db-ja.com

JQueryコードを1回だけ実行する方法は？

Jqueryメソッドが1つあり、ボタンをクリックするとそのメソッドを呼び出します。そのため、そのコードには1行 "$("#loadingMessage").css('padding-top','6%');"があります。このメソッドを最初に呼び出したときに、この行を1回だけ実行する必要があります。

だから一つの方法を見つけるのを手伝ってください

メソッドスクリプト全体は以下です

$('#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;
        )};
javascriptjquerycsshidepadding
9
Bangalore

jQuery .one（） を使用します。 .one（）メソッドを使用する場合、イベントハンドラー関数は各要素に対して1回だけ実行されます。

$('#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;
});
19
frosdqy

次のようにブール値をグローバル変数として使用します

var flag = true;

次に、実行前に条件を設定します。

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

#SearchButtonクリックイベントを1回だけ起動するように制限する場合は、.one 方法

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

特定のイベントバインディングなしで汎用関数を1回だけ実行する必要がある場合は、これを使用します。

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

何度も呼び出される関数内で有用です（何度も起動されるbeeinからのonclickイベントを防ぎます）

5
q81

迅速で「汚い」ソリューション：

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

説明：グローバルなjQuery変数が必要です（$.first_timeこの例では）、クリックイベントの匿名関数内でまだ知られています。

3
low_rents

jsクロージャーを使用して質問を解きます。

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

.oneを1回使用し、click for 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>
2
Mr7-itsurdeveloper

すべての言語でブール値を使用できます。

jqueryで：

var isFirst = true;

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

パディングトップをチェックするチェックを囲むことができます。 6％でない場合は、設定する必要があります。そうである場合、行をスキップします。ヒント：$（ '＃loadingMessage'）の結果を変数に入れると、2番目の要素検索を行う必要がなくなります。

そうです（テストされていません）：

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

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

これはもちろん、クリックハンドラーの残りのコードを毎回実行することを前提としています。それ以外の場合は、ハンドラーの実行後にクリックのバインドを解除できます。ヒント：代わりにjQueryのon（）およびoff（）メソッドを使用してください。

0
Bas Slagter