Javascript 为什么'；设置超时是否按预期工作？

每次鼠标指针悬停在

上时，我都会尝试移动它，但它似乎只有在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;

  }

---

您的代码中存在许多语法问题，下面纠正了主要问题

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

只调用一次，不会重复

此处演示：

---

如果您想在鼠标悬停在方框上时移动方框，我将更新代码。

您的代码中存在许多语法问题，这里纠正了主要问题

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

只调用一次，不会重复

此处演示：

---

如果您想在鼠标悬停在框上时移动框，我将更新代码。

看起来好像您打算使用

setInterval

来重复调整元素：

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

---

阅读更多信息。

它看起来好像您打算使用

setInterval

来反复调整元素：

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

阅读更多信息。

接收回调函数作为第一个参数，问题是moveBox（像素）执行该函数并返回其结果，所以您应该将其包装到另一个函数中

此外，每次在鼠标悬停回调中订阅“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);
        });

    });


 }

接收回调函数作为第一个参数，问题是moveBox（像素）执行该函数并返回其结果，所以您应该将其包装到另一个函数中

此外，每次在鼠标悬停回调中订阅“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);
        });

    });


 }

---

.addEventListener（“加载”，初始化）您希望传递函数本身，而不是运行它并传递其返回值。可能与我尝试像此文档一样传递函数的结果重复。getElementsByTagName（“body”）[0]。addEventListener（“load”，function（），但仍然不起作用
。addEventListener（“load”，init）；
您希望传递函数本身，而不是运行它并传递其返回值。可能与我尝试像此文档一样传递函数的结果重复。getElementsByTagName（“body”）[0]。addEventListener（“load”，函数（），但仍然无法工作，直到出现相同的问题dude:（我更新了代码，它现在应该像预期的那样对
setTimeout
仍然是一样的问题dude:（我更新了代码，它现在应该像预期的那样对
setTimeout
起作用了，现在是关于我如何通过setInterval（moveBox（pixel），perMs）这样的函数调用传递参数的问题）似乎不起作用它现在起作用了它是关于我如何将参数传递给同一个函数调用，如setInterval（moveBox（pixel），perMs）似乎不起作用