[英]javascript run function only once per button click
I use vue.js to handle some button clicks and run a method.我使用 vue.js 来处理一些按钮点击并运行一个方法。 So a button like所以像这样的按钮
<button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button>
will run this method just fine:将运行此方法就好了:
photo: function(){
if( vm.photoButton == 'Next, Declare Your Goal')
{
photoUpload();
} else {
sliderSignup.unslider('next');
}
}
the trouble is a double click can run sliderSignup.unslider('next');
麻烦的是双击可以运行sliderSignup.unslider('next');
twice skipping two slides, not good.两次跳过两张幻灯片,不好。 I know there is the jquery function .one()
you can use on a button click, but I use Vue.我知道有 jquery 函数.one()
可以在单击按钮时使用,但我使用 Vue。 How can I run this function only once or like once every 10 secs so you cant double click real fast?我怎样才能每 10 秒只运行一次或喜欢一次,这样你就不能真正快速地双击? I have look a lot and only see the option of a $('#element').one('click' function(){})
via jquery which wont work for me.我看了很多,只看到$('#element').one('click' function(){})
通过 jquery 的选项,这对我不起作用。
According to Vue Event-Modifiers you can use: .once根据Vue Event-Modifiers你可以使用:.once
Change your code from:更改您的代码:
<button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button>
to:至:
<button id="signup-photo-button" v-on:click.once="photo">{{ photoButton }}</button>
With Vue version 1 you may use a variable like in:使用 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>
Following @baao idea遵循@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');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.