有一个关于setInterval的问题

之前也没有对这个方法有什么疑惑，直到......

先贴代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>无缝滚动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{padding: 0;margin: 0;}
        ul,li{list-style: none;}
        div{width: 150px;height: 22px;background: #eee;overflow: hidden;}
        ul{width: 100px;margin-left: 20px;}
    </style>
</head>
<body>
    <div id="area">
        <ul id="ul1">
            <li style="color: red">床前明月光</li>
            <li style="color: blue">疑是地上霜</li>
            <li style="color: yellow">举头望明月</li>
            <li style="color: green">低头思故乡</li>
        </ul>
        <ul id="ul2"></ul>
    </div>
<script>
// var area=document.getElementById("area");
// var ul1=document.getElementById("ul1");
// var ul2=document.getElementById("ul2");
// ul2.innerHTML=ul1.innerHTML;
// function scrollUp(){
//     if(area.scrollTop >= ul1.offsetHeight){
//         area.scrollTop=0;
//     }else{
//         area.scrollTop++;
//     }
// }
// var myscroll=setInterval(scrollUp(),50);
// area.onmouseover=function(){
//     clearInterval(myscroll);
// }
// area.onmouseout=function(){
//     myscroll=setInterval(scrollUp(),50);
// }

    var area=document.getElementById("area");
    var ul1=document.getElementById("ul1");
    var ul2=document.getElementById("ul2");
    ul2.innerHTML=ul1.innerHTML;
    var myscroll=setInterval(function(){
        if(area.scrollTop >= ul1.offsetHeight){
            area.scrollTop=0;
        }else{
            area.scrollTop++;
        }
    },50);
    area.onmouseover=function(){
        clearInterval(myscroll);
    }
    area.onmouseout=function(){
        myscroll=setInterval(function(){
            if(area.scrollTop >= ul1.offsetHeight){
                area.scrollTop=0;
            }else{
                area.scrollTop++;
        }
    },50);
}
</script>
</body>
</html>

注释部分和没有注释部分的唯一区别就是将定时器中函数有无封装，注释中封装成函数sceollUp就总会出错，没有注释的部分也就是将函数直接写进去，就可以正常运行，真的好奇怪，求大佬解惑，感谢！

专注程序不可自拔

浏览 843回答 1

1回答

随时随地看视频慕课网APP