只有在x秒内没有鼠标单击时才触发函数。

Question

我有以下项目：https://sporedev.ro/pleiade/lobby.html (忽略声音，它们在将来不会自动播放)

我经常使用JS突出显示可点击的区域地图，如下所示：

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函数？

Answer 1

你能试试这个吗？(但没有测试)

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。