定时器（侧边栏）

编写JS运动实例时出现的问题

想要实现的效果是一个很简单的侧边栏，主要是出现了一个页面闪烁的问题
首先放一下效果图
1.鼠标没有悬停在“点我打开“时，侧边栏内容隐藏

2.鼠标悬停在“点我打开“时，侧边栏内容显示

3.鼠标离开“点我打开”时内容再次隐藏
具体的html代码：

<!--侧边栏-->
        <div id="div1">
            <span id="open">点我打开</span>
        </div>

css代码：

<style>
            #div1{
                width: 200px;
                height: 300px;
                position: absolute;
                top: 50px;
                left: -200px;
                background-color: #1b6d85;
            }
            #div1 span{
                width: 20px;
                height: 100px;
                position: absolute;
                top: 50px;
                right: -20px;
                background-color: #122b40;
            }
        </style>

js代码:

<script>
            window.onload = function(){
                var div1 = document.querySelector('#div1');
                div1.onmouseover = function(){
                    move(0);                              //传入需要运动的距离
                };
                div1.onmouseout = function(){
                    move(-200);
                };
            };
            var timer = null;
            function move(target) {
                var div1 = document.querySelector('#div1');
                /*注意这里*/
                timer = setInterval(function () {
                    var speed = 0;
                    if(div1.offsetLeft > target){
                        speed = -10;                      //判断当前的运动方向
                    }
                    else{
                        speed = 10;
                    }
                    if (div1.offsetLeft == target){
                        clearInterval(timer);           //达到目标值后清除定时器
                    }
                    else {
                        div1.style.left = div1.offsetLeft + speed + 'px';
                    }
                }, 30);
            }
        </script>

主要的思想就是改变div的left属性，当内容显示时为0px，当内容隐藏时为-200px，其中用到了offsetLeft获取div当前的left值
写了以上代码后，div能够进行打开和关闭，但是当打开后，div会不断的闪烁，关闭后，div也在闪烁，主要造成的原因就是定时器。

首先一开始我以为是left的值出了问题，多次更改后没有效果 打开火狐的查看器发现left值一直在变化，即打开了多个定时器。

于是需要在开定时器之前先清除之前的定时器
在js中添加清除定时器的代码:

clearInterval(timer);      //每开一次定时器，就关闭之前的，否则会导致页面闪烁

然后侧边栏就没问题啦