web-dev-qa-db-fra.com

Comment exécuter le code Jquery une seule fois?

J'ai une méthode jquery et j'ai utilisé l'appel de cette méthode en cliquant sur un bouton. Donc, dans ce code, j’ai une ligne "$("#loadingMessage").css('padding-top','6%');", j’ai besoin que cette ligne s’exécute une seule fois lorsque nous appelons cette méthode pour la première fois, puis que j’ai disparu cette ligne.

Alors aidez-moi s'il vous plaît à trouver un moyen

l'intégralité du script de méthode est ci-dessous

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

Utilisez jQuery .one () . Lorsque vous utilisez la méthode .one (), la fonction de gestionnaire d'événements n'est exécutée qu'une seule fois pour chaque élément.

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

Utilisez un booléen comme variable globale, comme

var flag = true;

Maintenant, définissez la condition avant l'exécution, comme

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

Si vous souhaitez limiter l'événement clic de #SearchButton à ne se déclencher qu'une seule fois, utilisez la méthode .one.

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

Si vous ne devez exécuter qu'une seule fois une fonction générique sans liaison d'événement particulière, utilisez-la.

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

Utile si à l'intérieur d'une fonction appelée plusieurs fois (empêche que l'événement onclick soit déclenché plusieurs fois)

4
q81

solution rapide et "sale":

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

quelques explications: vous avez besoin d'une variable globale jQuery ici ($.first_time dans cet exemple), de sorte qu'elle soit toujours connue dans la fonction anonyme de l'événement click.

1
low_rents

vous pouvez utiliser la fermeture de js pour slove la question.

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

utilisez .one pour une fois et utilisez cliquez pour autres.check ci-dessous

  <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>
1
Mr7-itsurdeveloper

vous pouvez utiliser boolean dans toutes les langues.

en jquery:

var isFirst = true;

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

Vous pouvez mettre un contrôle autour de celui-ci qui vérifie le padding-top. Si ce n'est pas 6%, vous devez le définir. Si c'est le cas, vous sautez la ligne. Astuce: placez le résultat de $ ('# loadingMessage') dans une variable pour ne pas avoir à rechercher un deuxième élément.

Comme si (non testé):

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

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

Cela suppose bien sûr que vous souhaitiez exécuter le reste du code dans le gestionnaire de clics à chaque fois. Sinon, vous pouvez simplement dissocier le clic une fois le gestionnaire exécuté. Conseil: utilisez plutôt les méthodes jQuery on () et off ().

0
Bas Slagter