Question

每次我的鼠标指针悬停在<div id="box">上时，我会尝试移动mouseover，但只有当我在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; }事件而不是鼠标悬停在它上面时它才会移动

.mm-menu {
    z-index: 200 !important;
}

Answer 1

似乎您打算使用setInterval来重复调整元素：

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

详细了解here。

Answer 2

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

此外，您还希望取消订阅“鼠标输出”。每次在鼠标悬停回调中订阅它时都会发生事件：

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/

如果你想让你的盒子在鼠标悬停时移动，我会更新代码。

为什么setTimeout不按预期工作？

3 个答案: