为什么setTimeout不能像预期的那样工作?

Why doesn't setTimeout work as expected?

本文关键字：工作 setTimeout 不能 为什么      更新时间：2023-09-26

我试图移动<div id="box">每次我的鼠标指针悬停在它上面，但它似乎只有当我在div上有mouseover事件而不是当我的鼠标悬停在它上面时才会移动。

document.getElementsByTagName("body")[0].addEventListener("load",init());
function init(){
 console.log('in init');
 document.getElementById("box").addEventListener("mouseover",function(){
    var pixels=5;
    var perMs=40;
    var repeater=setTimeout(moveBox(pixels),perMs);
    document.getElementById("box").addEventListener("mouseout",function(){
        console.log('mouseOut');
        clearTimeout(repeater);
        });
    });
 }
 function moveBox(pixels){
    console.log('moveBox');
    var leftBox=document.getElementById("box").style.left;
    leftBox=parseInt(leftBox)+pixels;
    document.getElementById("box").style.left=leftBox;
  }

看起来好像你打算使用setInterval来代替，在重复的基础上调整元素:

var repeaterId = setInterval(moveBox, perMs, pixels);

setTimeout接收回调函数作为第一个参数，问题是moveBox(pixels)执行函数并返回它的结果，所以你应该把它包装到另一个函数。

你也会想要取消订阅'mouseout'事件每次你订阅它在你的mouseover回调:

function init(){
 console.log('in init');
 document.getElementById("box").addEventListener("mouseover",function(){
    var pixels=5;
    var perMs=40;
    var repeater=setTimeout(function(){moveBox(pixels)},perMs);

    document.getElementById("box").addEventListener("mouseout",function onMouseOut(){
        console.log('mouseOut');
        clearTimeout(repeater);
        document.getElementById("box").removeEventListener("mouseout",onMouseOut);
        });
    });

 }

您的代码中有许多语法问题，这里是主要问题的更正。

function init() {
    console.log('in init');
    var box = document.getElementById("box"),
        pixels = 5,
        perMs = 40,
        repeater;
    function moveBox(pixels) {
        console.log('moveBox', pixels);
        var boxLeft = parseInt(box.style.left, 10) || 0;
        box.style.left = (boxLeft + pixels) + 'px';
    }
    box.addEventListener("mouseover", function() {
        repeater = setTimeout(moveBox, perMs, pixels);
    });
    box.addEventListener("mouseout", function(){
        console.log('mouseOut');
        clearTimeout(repeater);
    });
}
document.getElementsByTagName("body")[0].addEventListener("load",init);

请注意setTimeout只被调用一次，它不会重复。

此处演示:https://jsfiddle.net/vqgesj58/1/

如果你想让你的方框在鼠标停留时移动，我将更新代码

相关文章：