每個按鈕點擊只能運行一次javascript函數

我使用vue.js來處理一些按鈕點擊並運行一個方法。因此，像每個按鈕點擊只能運行一次javascript函數

<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秒只運行一次這樣的功能，因此你不能雙擊實時快速？我看了很多，只看到通過jquery的$('#element').one('click' function(){})選項，這將不會爲我工作。

來源

2016-12-22 Packy

搜索「反跳」，你會發現許多例子。也可能有一些jQuery debouncing插件。 – Barmar

根據Vue Event-Modifiers你可以使用：。一旦

更改您的代碼從：

<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>

來源

2016-12-22 19:22:24 gaetanoM

哦，這是完美的，但我們的系統是Vue.js 1，現在沒有時間遷移。 – Packy

@Packy答案更新。我希望這可以幫助你。 – gaetanoM

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

來源

2016-12-22 19:22:49

每個按鈕點擊只能運行一次javascript函數

回答

相關問題