超时后才能再次单击
Time out before it can be clicked again
在我的拼写游戏中,用户点击字母来拼写单词。当单击一个字母时,它会在正确的区域中设置动画。
问题是,当您单击它们以加快动画混乱和字母重叠的速度时。
为了解决这个问题,我想添加一个1或2秒的超时,然后可以再次点击可点击的内容。
我将如何做到这一点,以及我将把它放在代码中的什么位置
这是可点击的代码
$('.drag').on('click', function(e) {
e.preventDefault();
var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
$(".minibutton").prop("disabled", true);
b.clone().addClass(
b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
background: "transparent",
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function() {
$(this).css({
top: 0,
left: 0
}).appendTo(target);
if (!$('.drop-box.spellword:not(.occupied)').length) {
var wordIsCorrect = 0;
$('.drop-box.spellword').each(function() {
if ($(this).attr("data-letter") == $(this).find("div").attr("data-letter")) {
wordIsCorrect++;
}
});
console.log(wordIsCorrect);
console.log($('.drop-box.spellword').length);
if ($('.drop-box.spellword').length == wordIsCorrect) {
$('.drop-box.spellword').addClass('wordglow2');
$(right).val('Well Done!');
$(right).show();
audioS.play();
$('.counter').html(completeWords + '/6').show();
$(wrong).hide();
$('.minibutton').prop('disabled', false);
} else {
$('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Try Again');
$('.minibutton').prop('disabled');
$(wrong).show();
audioF.play();
$('.counter').html(completeWords + '/6').show();
$(right).hide();
//$('.minibutton').prop('disabled', true);
$('.drop-box.spellword').animate({
'opacity': 1
}, 1000, function() {
$(this).removeClass('wordglow4').removeClass('occupied').html('')
});
}
}
});
}
谢谢
var animation = false;
$('.drag').on('click', function(e) {
if(animation) return;
animation = true;
并添加到您的回调中:
animation = false;
完整:
var animation = false;
$('.drag').on('click', function(e) {
e.preventDefault();
if(animation) return;
animation = true;
setTimeout(function(){animation = false;},1000); // Can't click letters for 1 sec
var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
$(".minibutton").prop("disabled", true);
b.clone().addClass(
b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
background: "transparent",
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function() {
$(this).css({
top: 0,
left: 0
}).appendTo(target);
if (!$('.drop-box.spellword:not(.occupied)').length) {
var wordIsCorrect = 0;
$('.drop-box.spellword').each(function() {
if ($(this).attr("data-letter") == $(this).find("div").attr("data-letter")) {
wordIsCorrect++;
}
});
console.log(wordIsCorrect);
console.log($('.drop-box.spellword').length);
if ($('.drop-box.spellword').length == wordIsCorrect) {
$('.drop-box.spellword').addClass('wordglow2');
$(right).val('Well Done!');
$(right).show();
audioS.play();
$('.counter').html(completeWords + '/6').show();
$(wrong).hide();
$('.minibutton').prop('disabled', false);
} else {
$('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Try Again');
$('.minibutton').prop('disabled');
$(wrong).show();
audioF.play();
$('.counter').html(completeWords + '/6').show();
$(right).hide();
//$('.minibutton').prop('disabled', true);
$('.drop-box.spellword').animate({
'opacity': 1
}, 1000, function() {
$(this).removeClass('wordglow4').removeClass('occupied').html('')
});
}
}
}, function(){
animation = false;
});
}
在那里我使用了setTimeout而不是回调。
相关文章:
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 单击F5时如何停止页面加载
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 单击jquery清除输入值
- 单击按钮以等待单击按钮
- 在单击href链接的同时下载文件
- 超时后才能再次单击
- Chrome javascript调试器在超时时暂停,可以't调试单击事件
- 单击后JavaScript函数超时
- 量角器根据条件单击嵌套元素,错误 - 在指定的超时内未调用异步回调
- 删除设置单击超时
- 单击按钮超时javascript
- 超时时单击动态标签时出现问题
- 多个设置超时函数在第一次单击时不执行
- 扩展单击按钮时的超时功能
- 单击后退按钮并登陆带有超时重定向到同一页面的页面
- 单击触发器后清除超时
- 如何使用 Clippy.js 在单击时隐藏元素而不是超时