遇到特定条件时停止 setInterval()

我想在左边距为 1200px 时停止 setInterval（）。我的代码是：-

<html>
<body>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#btn').click(function () {
            var i = setInterval(function () {
                $('img').animate({
                    'margin-left': '+=100px'
                }, 'fast');
                var a = $('img').css('margin-left');
                if (a == "1200px") {
                      clearInterval(i);
                }
            }, 50);
        });
    });
</script>
<img src="48_800[1].jpg" height="50px" width="50px"><br>
<input type="button" value="start" id="btn"><br>
</body>
</html>

它不起作用。谁能帮我？

您应该将像素值转换为整数a = parseInt(a);。（就像以前一样，您获得带有小数的margin-left值，例如 99.45px 然后199.45px所以它跳100px ）

现场示例

var i = setInterval(function () {
    $('img').animate({
        'margin-left': '+=100px'
    }, 'fast');
    var a = $('img').css('margin-left');
    a = parseInt(a);
    if (a >= 100) {
        clearInterval(i);
    }
}, 50);

更新

我刚刚注意到清除间隔后动画仍在运行。不知道为什么会发生这种情况，但我找到了一种方法来解决问题，方法是将最终边距缓存在变量中，而不是在动画中计算它。

现场示例 2

请注意，在示例中，我使用 >=100 来查看结果。

改用这个：已更新

$(document).ready(function () {
    $('#btn').click(function () {
        var i = setInterval(function () {
            $('img').animate({
                'margin-left': '+=100px'
            }, 'fast');
            var a = $('img').css('margin-left');
            //console.log(a.substring(0,a.lastIndexOf('px')));
            if (a.substring(0,a.lastIndexOf('px')) >= 1200) {
                  clearInterval(i);
            }
        }, 50);
    });
});

试试这个：

if(parseInt(a) >= 1200)
{
     clearInterval(i);
}
},50);

$(document).ready(function () {
    $('#btn').click(function () {
        var a="";
        while(a != "1200px"){
          $('img').animate({
                'margin-left': '+=100px'
            }, 'fast');
            a = $('img').css('margin-left');
      }
    });
});

您现有的代码看起来是错误的，除了引用不需要SetInterval之外，也可以使用 decent while 子句本身来实现。

快乐编码:)

尝试将

时间的值更改为 setInterval 方法

数值必须以毫秒为单位

相关内容

最新更新

热门标签：