我有以下项目:https://sporedev.ro/pleiade/lobby.html (忽略声音,它们将来不会自动播放)
我不时使用 JS 突出显示可点击区域 map ,如下所示:
function blinkIn() {
setTimeout(function() {
$("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
$(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "#FFF").css('opacity', '0.5').css('stroke-dasharray', '50').css('stroke-dashoffset', '100').css('animation', 'dash 1.5s linear forwards');
blinkOut();
}, 3000);
}
function blinkOut() {
setTimeout(function() {
$("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger('mouseout.mapify');
$(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "").css('opacity', '').css('stroke-dasharray', '').css('stroke-dashoffset', '').css('animation', '');;
blinkIn();
}, 1500);
}
blinkIn();
我对如何在检测到鼠标点击时阻止该函数运行进行了一些研究。我发现了 mousedown
和其他状态,但它似乎对我没有帮助。
document.body.getElementsByTagName("*").onclick = function(){ clearTimeout; };
如何仅在 x 秒内没有鼠标点击的情况下触发 blinkIn
函数?
最佳答案
你能试试这个吗? (尚未测试)
var timeout;
function blinkIn() {
timeout = setTimeout(function() {
$("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
$(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "#FFF").css('opacity', '0.5').css('stroke-dasharray', '50').css('stroke-dashoffset', '100').css('animation', 'dash 1.5s linear forwards');
blinkOut();
}, 3000);
}
function blinkOut() {
setTimeout(function() {
$("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger('mouseout.mapify');
$(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "").css('opacity', '').css('stroke-dasharray', '').css('stroke-dashoffset', '').css('animation', '');;
blinkIn();
}, 1500);
}
blinkIn();
$(document).click(function(){
clearTimeout(timeout);
blinkIn();
});
将 setTimeout
传递给变量,然后当用户单击时,只需在变量中使用 clearTimeout
。
关于javascript - 仅当 x 秒内没有鼠标点击时触发函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47446738/