javascript - 仅当 x 秒内没有鼠标点击时触发函数

Question

我有以下项目: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 函数？

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 。