账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    js用setInterval（）做缓冲运动，第一个缓冲能实现效果，第二个为什么还没到达设定条件就已经停止计时了？
    60
    0

    js用setInterval（）做缓冲运动，第一个缓冲能实现效果，第二个为什么还没到达设定条件就已经停止计时了？

    做一个侧边栏的缓冲效果，从左边进入和离开，但是离开的时候感觉没有在及时，LeftBar.style.left直接跳到-300px.

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）

    <!DOCTYPE html>
<html lang="en" style="overflow-x: hidden">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style>
    html,body{margin: 0;padding: 0;overflow-x: hidden}
    .nav-container{width: 100%;height: 90px;background-color: #0abfbf;position: relative}
    .nav-container #tab-bar{width: 60px;height: 60px;border: 1px #2b2c31 solid;text-align: center;position: absolute;display:flex;left: 10px;margin-top: 10px}
    .nav-container #tab-bar span{width: 80%;height: 4px; background-color: #2b2c31;margin-top: 16px;
        display:block;position: absolute;margin-left: 10%;}
    .nav-container #tab-bar .tab-bar-1{top: 0} .nav-container #tab-bar .tab-bar-2{top: 9px} .nav-container #tab-bar .tab-bar-3{top: 18px}

    .left-bar{width: 300px;border: 1px solid #0c6492;display: block;top: 0;left: -300px;right: auto;position: fixed;overflow-y:auto}
    .bar-close{width: 60px;height: 60px;position: relative;right: -220px}
    .bar-close .bar-left, .bar-close .bar-right{position: absolute;width: 80%;margin-left: 10%;height: 3px;background: black}
    .bar-close .bar-left{transform: rotate(45deg);top: 5px}  .bar-close .bar-right{transform: rotate(315deg);top: 5px}
    body{left: 0px;display: block;overflow-y: auto;height: 3000px}
</style>
<body>
<nav class="nav-container">
    <div id="tab-bar">
        <span class="tab-bar-1"></span>
        <span class="tab-bar-2"></span>
        <span class="tab-bar-3"></span>
    </div>
</nav>

<div class="left-bar">
    <ul>
        <li>首页</li>
        <li>Dating Site</li>
        <li>Dating Tips</li>
        <li>Blogs</li>
        <li>Forum</li>
        <li>Sign Up</li>
    </ul>
    <div class="bar-close">
        <span class="bar-left"></span>
        <span class="bar-right"></span>
    </div>
</div>
</body>
<script>


    var LeftBar =document.getElementsByClassName('left-bar')[0]
    var BoDy = document.body

    var  TabBar = document.getElementById('tab-bar')
    var BarClose = document.getElementsByClassName('bar-close')[0]


    TabBar.onclick = function () {

        var timer = setInterval(function () {
            console.log(LeftBar.offsetLeft)
            if(LeftBar.style.left>=0 +"px"){
                clearInterval(timer)
                LeftBar.style.left = 0 + "px"
            }
            else {
                LeftBar.style.left = (2+LeftBar.offsetLeft)/2 + "px"
                BoDy.style.marginLeft = (600+LeftBar.offsetLeft)/2 +"px"
            }

        },100)

    }

    BarClose.onclick = function () {

        var timer = setInterval(function () {
            //console.log(LeftBar.offsetLeft)
            if(LeftBar.style.left<=-300 + "px"){
                clearInterval(timer)
                LeftBar.style.left = -300 + "px"
            }
            else {
                LeftBar.style.left = (-4+LeftBar.offsetLeft)/2 + "px"
                BoDy.style.marginLeft =(2+LeftBar.offsetLeft)/2 +"px"
                console.log(LeftBar.offsetLeft)
            }

        },100)

    }
</script>
</html>

    怎样才能实现侧边栏进入和离开的时候都有缓冲运动呢？

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 莫笑年少江湖梦 普通会员 1楼

      在JavaScript中，setInterval()函数用于设置一个定时器，每次定时器调用时，都会执行一次指定的函数。定时器的运行方式可以是每隔一段时间执行一次函数，也可以是每次执行函数之前检查一个特定的条件，然后在条件满足时立即停止定时器。

      假设我们有一个函数handleInterval，它接受一个回调函数作为参数，并在定时器调用时执行这个函数。当第一个setInterval()函数调用handleInterval并设置定时器的时间间隔为1秒时，函数开始执行：

      javascript setInterval(handleInterval, 1000);

      在这个例子中，handleInterval函数将在1秒后执行，因为定时器的时间间隔为1秒。所以，当第一个定时器调用handleInterval时，函数会被立即调用，并开始执行，然后在1秒后返回，这时第二个定时器已经运行，所以它没有等到条件满足就停止计时。

      但是，当第二个定时器调用handleInterval并设置定时器的时间间隔为1秒时，由于第一个定时器已经执行了1秒，它已经到达了预定的回调函数的执行时间，而回调函数handleInterval在返回之前，已经检查了第二个定时器的运行条件，当条件满足时立即停止了计时器，所以第二个定时器在没有等到回调函数的执行时间（即1秒）之前就已经停止计时了。

      如果你希望第二个定时器在满足条件后立即停止计时，你可以修改handleInterval函数的逻辑，如下所示：

      javascript function handleInterval() { // 在此处添加检查条件和停止计时的代码 if (condition) { clearInterval(intervalId); } // 在此处添加回调函数的执行代码 handleCallback(); }

      这样，第二个定时器在满足条件后立即停止计时，而第一个定时器在执行handleInterval函数后，会立即检查第二个定时器的运行条件，当条件满足时立即停止计时。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部