Javascript run Funktion nur einmal pro Knopf klicken

Question

Ich benutze vue.js, um einige Knopfklicks zu behandeln und eine Methode auszuführen. So eine Schaltfläche wie

<button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button>

wird diese Methode laufen gerade fein:

photo: function(){ 

    if(vm.photoButton == 'Next, Declare Your Goal') 
    { 
     photoUpload();     
    } else { 
     sliderSignup.unslider('next'); 
    } 

} 

das Problem ist ein Doppelklick kann sliderSignup.unslider('next'); zweimal Überspringen zwei Schlitten laufen, nicht gut. Ich weiß, dass es die jquery Funktion .one() gibt, die Sie auf einen Knopfklick verwenden können, aber ich benutze Vue. Wie kann ich diese Funktion nur einmal oder alle 10 Sekunden ausführen, damit Sie nicht wirklich schnell doppelklicken können? Ich habe viel gesehen und sehe nur die Option von $('#element').one('click' function(){}) über Jquery, die nicht für mich arbeiten.

Answer 1

Nach Vue Event-Modifiers können Sie: .Sobald

aus dem Code ändern:

<button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button> 

zu:

<button id="signup-photo-button" v-on:click.once="photo">{{ photoButton }}</button> 

Mit Vue Version 1 eine Variable wie in verwenden:

new Vue({ 
 
    el: '#example-2', 
 
    data: { 
 
    isAlreadyClicked: true, 
 
    photoButton: 'button demo' 
 
    }, 
 
    methods: { 
 
    photo: function (event) { 
 
     if (this.isAlreadyClicked) { 
 
     this.isAlreadyClicked = false; 
 
     console.log('do your stuff'); 
 
     } else { 
 
     console.log('already clicked. Do nothing'); 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script> 
 

 
<div id="example-2"> 
 
    <button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button> 
 
</div>

Answer 2

Nach @baao Idee

photo: function(){ 

     if(vm.photoButton == 'Next, Declare Your Goal') 
     { 
      photoUpload();     
     } else { 
      document.getElementById('signup-photo-button').disabled = true; 
      setTimeout(function() { 
       document.getElementById('signup-photo-button').disabled = false; 
    } 
,10000); 
      sliderSignup.unslider('next'); 
     } 
    }