Javascript "Don´t change states to fast"
Javascript "Don´t change states to fast"
大家好,我有一个代码,当您单击一个按钮(它开始播放视频并混合)时,它会从一种状态更改为另一种状态。现在我试着说我的事件处理程序,如果有人点击得非常快,他不应该将它用作输入。类似 = Eventhandler 的东西,请注意一秒钟内只需单击一次。希望我的代码在这里是可以理解的:
<script>
var clickState = 0;
var btn = document.querySelector('#playbutton');
btn.addEventListener('click', function(){
if (clickState == 0) {
document.querySelector('#toggler').emit('fade_1');
var videoEl_1 = document.querySelector('#video');
videoEl_1.play();
document.querySelector( "#skyid" ).emit('fade_1');
clickState = 1;
} else {
document.querySelector('#toggler').emit('fade_2');
var videoEl_1 = document.querySelector('#video');
videoEl_1.pause();
document.querySelector( "#skyid" ).emit('fade_2');
clickState = 0;
}
});
</script>
您可以在单击按钮时将其禁用,然后设置超时以在一秒钟后重新启用它。
像这样
$( document ).ready(function() {
$("#myButton").click(function(){
// disable the button
$("#myButton").prop("disabled", true);
//do the things you want the button to do:
console.log("doing stuff");
// reenable the button after 1 second
setTimeout(function(){
$("#myButton").prop("disabled", false);
}, 1000);
});
});
此处示例:
https://jsfiddle.net/20n1gb89/8/
我在这里使用了一些 jQuery,但是 setTimeout 是原生的 JavaScript
编辑:
您似乎是在同一个按钮的点击处理程序中定义点击处理程序。看我的评论。删除 btn.addEventListener 并保留 if else 语句。看看是否可行。
$(document).ready(function () {
// here you define a click handler for playbutton
$("#playbutton").click(function () {
// disable the button
$("#playbutton").prop("disabled", true);
//do the things you want the button to do:
var clickState = 0;
var btn = document.querySelector('#playbutton');
// here you define a click handler for the same button
// inside the first click handler. You shouldn't do that.
btn.addEventListener('click', function () {
if (clickState == 0) {
document.querySelector('#toggler').emit('fade_1');
var videoEl_1 = document.querySelector('#video');
videoEl_1.play();
document.querySelector("#skyid").emit('fade_1');
clickState = 1;
} else {
document.querySelector('#toggler').emit('fade_2');
var videoEl_1 = document.querySelector('#video');
videoEl_1.pause();
document.querySelector("#skyid").emit('fade_2');
clickState = 0;
}
console.log("doing stuff");
// reenable the button after 1 second
setTimeout(function () {
$("#playbutton").prop("disabled", false);
}, 2000);
});
});
});
编辑 2:
也就是。试试这个:
$(document).ready(function () {
$("#playbutton").click(function () {
// disable the button
$("#playbutton").prop("disabled", true);
//do the things you want the button to do:
var clickState = 0;
// this doesn't really make sense. clickState will always be 0
// as it is defined as 0 each time you click the button. You
// will need to define clickState outside the click handler
// for this to work.
if (clickState == 0) {
document.querySelector('#toggler').emit('fade_1');
var videoEl_1 = document.querySelector('#video');
videoEl_1.play();
document.querySelector("#skyid").emit('fade_1');
clickState = 1;
} else {
document.querySelector('#toggler').emit('fade_2');
var videoEl_1 = document.querySelector('#video');
videoEl_1.pause();
document.querySelector("#skyid").emit('fade_2');
clickState = 0;
}
console.log("doing stuff");
// reenable the button after 1 second
setTimeout(function () {
$("#playbutton").prop("disabled", false);
}, 2000);
});
});
});
您可以在点击时添加一个事件监听器并用它创建一个计时器
例如,这里在用户点击按钮后,我们启动一个1000ms的定时器,如果在这个时间间隔内点击按钮,我们将显示一个警报。
var btn = document.querySelector('#playbutton');
btn.addEventListener('click', function(){
setTimeout(function(){
if (btn.clicked == true){
alert("Cmon dude, chill a little");
}
}, 1000);
});
大家好,我有一个代码,当您单击一个按钮(它开始播放视频并混合)时,它会从一种状态更改为另一种状态。现在我试着说我的事件处理程序,如果有人点击得非常快,他不应该将它用作输入。类似 = Eventhandler 的东西,请注意一秒钟内只需单击一次。希望我的代码在这里是可以理解的:
<script>
var clickState = 0;
var btn = document.querySelector('#playbutton');
btn.addEventListener('click', function(){
if (clickState == 0) {
document.querySelector('#toggler').emit('fade_1');
var videoEl_1 = document.querySelector('#video');
videoEl_1.play();
document.querySelector( "#skyid" ).emit('fade_1');
clickState = 1;
} else {
document.querySelector('#toggler').emit('fade_2');
var videoEl_1 = document.querySelector('#video');
videoEl_1.pause();
document.querySelector( "#skyid" ).emit('fade_2');
clickState = 0;
}
});
</script>
您可以在单击按钮时将其禁用,然后设置超时以在一秒钟后重新启用它。
像这样
$( document ).ready(function() {
$("#myButton").click(function(){
// disable the button
$("#myButton").prop("disabled", true);
//do the things you want the button to do:
console.log("doing stuff");
// reenable the button after 1 second
setTimeout(function(){
$("#myButton").prop("disabled", false);
}, 1000);
});
});
此处示例:
https://jsfiddle.net/20n1gb89/8/
我在这里使用了一些 jQuery,但是 setTimeout 是原生的 JavaScript
编辑:
您似乎是在同一个按钮的点击处理程序中定义点击处理程序。看我的评论。删除 btn.addEventListener 并保留 if else 语句。看看是否可行。
$(document).ready(function () {
// here you define a click handler for playbutton
$("#playbutton").click(function () {
// disable the button
$("#playbutton").prop("disabled", true);
//do the things you want the button to do:
var clickState = 0;
var btn = document.querySelector('#playbutton');
// here you define a click handler for the same button
// inside the first click handler. You shouldn't do that.
btn.addEventListener('click', function () {
if (clickState == 0) {
document.querySelector('#toggler').emit('fade_1');
var videoEl_1 = document.querySelector('#video');
videoEl_1.play();
document.querySelector("#skyid").emit('fade_1');
clickState = 1;
} else {
document.querySelector('#toggler').emit('fade_2');
var videoEl_1 = document.querySelector('#video');
videoEl_1.pause();
document.querySelector("#skyid").emit('fade_2');
clickState = 0;
}
console.log("doing stuff");
// reenable the button after 1 second
setTimeout(function () {
$("#playbutton").prop("disabled", false);
}, 2000);
});
});
});
编辑 2:
也就是。试试这个:
$(document).ready(function () {
$("#playbutton").click(function () {
// disable the button
$("#playbutton").prop("disabled", true);
//do the things you want the button to do:
var clickState = 0;
// this doesn't really make sense. clickState will always be 0
// as it is defined as 0 each time you click the button. You
// will need to define clickState outside the click handler
// for this to work.
if (clickState == 0) {
document.querySelector('#toggler').emit('fade_1');
var videoEl_1 = document.querySelector('#video');
videoEl_1.play();
document.querySelector("#skyid").emit('fade_1');
clickState = 1;
} else {
document.querySelector('#toggler').emit('fade_2');
var videoEl_1 = document.querySelector('#video');
videoEl_1.pause();
document.querySelector("#skyid").emit('fade_2');
clickState = 0;
}
console.log("doing stuff");
// reenable the button after 1 second
setTimeout(function () {
$("#playbutton").prop("disabled", false);
}, 2000);
});
});
});
您可以在点击时添加一个事件监听器并用它创建一个计时器
例如,这里在用户点击按钮后,我们启动一个1000ms的定时器,如果在这个时间间隔内点击按钮,我们将显示一个警报。
var btn = document.querySelector('#playbutton');
btn.addEventListener('click', function(){
setTimeout(function(){
if (btn.clicked == true){
alert("Cmon dude, chill a little");
}
}, 1000);
});