为什么setTimeout无法按预期工作？

Question

我试图每次将鼠标指针悬停在<div id="box">上时，但它似乎仅在我将mouseover在div上时才移动，而不是在鼠标悬停在div上时移动。

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;

  }

Answer 1

似乎您打算改用setInterval来反复调整元素：

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

在此处了解更多信息。

Answer 2

setTimeout将回调函数作为第一个参数，问题是moveBox（pixels）执行该函数并返回它的结果，因此您应该将其包装到另一个函数中。

另外，您每次在mouseover回调中订阅“ mouseout”事件时都希望取消订阅：

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);
        });

    });


 }

Answer 3

您的代码中有许多语法问题，其中的主要问题已得到纠正。

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/

如果您希望在鼠标悬停时移动它的框，我将更新代码。