Question

我要实现以下逻辑：在鼠标移动到ID为"spirit"的一个元素上的同时，休眠一会儿然后更改元素的位置。但是，如果用户单击"sleep period"中的元素，则会提示消息。

这就是我的代码：

    function changePos() {


        let img = document.getElementById("spirit");


        // "sleep"
        let now = new Date().getTime();
        while ( new Date().getTime() < now + 1000 ){

            if (img.onclick == true){
                alert("Click Success")
            }

        }

        // change position
        img.style.left = Math.random()*innerWidth+"px";
        img.style.top = Math.random()*innerHeight+"px";

    }

错误是：当我单击该元素时，没有任何反应。它通常会改变位置。

对此有何建议？

Answer 1

var timeOutVariable = null;
var timeOutDuration = yourtimeoutduration;
document.getElementById("spirit").onmouseover = function(){
     if (timeOutVariable !== null) {
         clearTimeout(timeOutVariable );
     }
     timeOutVariable = setTimeout(function(){
         document.getElementById("spirit").style.left = Math.random()*innerWidth+"px";
         document.getElementById("spirit").style.top = Math.random()*innerHeight+"px";
     }, timeOutDuration);
}

document.getElementById("spirit").onclick = function(){
    if (timeOutVariable !== null) {
         clearTimeout(timeOutVariable );
         timeOutVariable = null;
     }
    alert("Click success");
};

Answer 2

要实现您的目标，您可能需要主要使用setTimeout函数，该函数在一定毫秒（其{{1}）后执行回调函数（其1st参数） }参数）。另外，您需要将两个不同的事件附加到2nd上以操作全局变量（不是真的，但我指的是所有事件处理程序都可以访问），例如，将其称为#spirit，它的工作原理是一个标志，用于显示是否单击该消息。这些事件是：

allowClick事件：鼠标悬停该元素（在我们的情况下为mouseenter）时将触发它，并调用执行以下操作的处理程序：
1. 将#spirit变量设置为allowClick，以便在单击后显示该消息。
2. 使用true函数启动计时器，该计时器等待指定的秒数，然后回调（记住setTimeout的{{1}}参数）进入清除计时器的过程，设置{{1 }}设置为false，因此单击后没有消息，然后根据随机数应用1st和setTimeout转换。
allowClick事件：如果top标志为left，则显示消息，否则不执行任何操作。

为了演示，这是一个演示，其中包含一些有用的评论：

在您的代码中，click元素似乎是一个图像，因此我使用了placeholder image来模拟您的情况。

在演示中，为了选择接近动态的等待时间，我为图像使用了allowClick属性，该属性包含进行翻译之前要等待的秒数（实际上是毫秒）。 true将使用{1}}和#spirit属性。无论如何，如果将此属性保持未定义状态，则会自动使用回退到一秒钟的时间。

此外，为了应用data-wait-until和top，必须放置图像（具有left以外的JavaScript规则}。

top

left

position

无论如何，即使单击图像以获取消息（当然，延迟也结束了），图像仍然会移动，因为您没有告诉我们单击图像时该怎么做：请移动或取消它。

如何将onclick嵌入另一个功能

2 个答案: