javascript - 如何让 div 在悬停时上下移动？鼠标悬停和鼠标悬停冲突

Question

我正在尝试使用 setInterval 运行动画，效果很好。尽管我试图让动画一直运行，然后在鼠标移出后停止。

我可以让 div 上下移动，但如果你将鼠标移入和移出太快，它就会陷入添加和减去像素的循环中。或者其他时候它会完全停止移动并卡在底部的顶部。

你可以看到这里的问题，将鼠标快速移入和移出小框几次。 https://jsfiddle.net/L16fdbrj/1/

这是我的 Javascript:

    var blog_folder_index = false;
    var blog_folder_pos = 0;
    var blog_folder_interval;
    var framespeed = 5;

    function blog_folder_mouseover()
        {
            if (blog_folder_index == false)
                {
                    document.getElementById("blog_folder_button").style.cursor = "pointer";
                blog_folder_interval = setInterval(function (){ blog_folder_add();}, 35);   
                }
        }

    function blog_folder_mouseout()
        {
            blog_folder_interval = setInterval(function (){ blog_folder_subtract();}, 50);
            console.log("mouseout");        
        }

    function blog_folder_add()
        {
            if (blog_folder_pos <= -30)
                {
                    console.log(blog_folder_pos);
                    stop_function();
                }
            else if (blog_folder_pos > -30)
                {
                    blog_folder_pos -= framespeed; 
                    document.getElementById("blog_folder").style.marginTop = blog_folder_pos + 'px '; 
                }
        }

    function blog_folder_subtract()
        {
            if (blog_folder_pos >= 0)
                {
                    console.log(blog_folder_pos);
                    stop_function();
                }
            else if (blog_folder_pos < 0)
                {
                    blog_folder_pos += framespeed; 
                    document.getElementById("blog_folder").style.marginTop = blog_folder_pos + 'px '; 
                }
        }   

    function blog_folder_click()
        {

            blog_folder_index = true;
            portfolio_folder_index = false;
            about_folder_index = false;
            document.getElementById("blog_folder_button").style.cursor = "default";

            document.getElementById("portfolio_folder").style.zIndex = "2";
            document.getElementById("blog_folder").style.zIndex = "3";
            document.getElementById("about_folder").style.zIndex = "1";


            blog_folder_interval = setInterval(function (){ blog_folder_subtract();}, 35);
        }

    function stop_function()
        {
            clearInterval(blog_folder_interval);
        }

Answer 1

您只需在创建新间隔之前清除之前的间隔:

https://jsfiddle.net/L16fdbrj/2/

function blog_folder_mouseover() {
    if (blog_folder_index == false) {
        document.getElementById("blog_folder_button").style.cursor = "pointer";

        // clear previous interval
        stop_function();

        blog_folder_interval = setInterval(function () {
            blog_folder_add();
        }, 35);
    }
}

function blog_folder_mouseout() {
    // clear previous interval
    stop_function();

    blog_folder_interval = setInterval(function () {
        blog_folder_subtract();
    }, 50);
    console.log("mouseout");
}