javascript 每次單擊按鈕僅運行一次函數

Question

我使用 vue.js 來處理一些按鈕點擊並運行一個方法。 所以像這樣的按鈕

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

將運行此方法就好了：

photo: function(){

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

 }

麻煩的是雙擊可以運行sliderSignup.unslider('next'); 兩次跳過兩張幻燈片，不好。 我知道有 jquery 函數.one()可以在單擊按鈕時使用，但我使用 Vue。 我怎樣才能每 10 秒只運行一次或喜歡一次，這樣你就不能真正快速地雙擊？ 我看了很多，只看到$('#element').one('click' function(){})通過 jquery 的選項，這對我不起作用。

Answer 1

根據Vue Event-Modifiers你可以使用：.once

更改您的代碼：

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

至：

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

使用 Vue 版本 1，您可以使用如下變量：

 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

遵循@baao 的想法

 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');
        }
     }