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

标签 javascript jquery

我想在左边距为 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)

Live example

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);


更新

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

Live example 2

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

关于javascript - 当遇到特定条件时停止 setInterval(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21931771/

相关文章:

jquery - XPage 的服务器端 Javascript 库(jQuery、Underscore、Dojo)

javascript - JS 用斜杠替换主题标签

javascript - 如何为highchart中的仪表图表中的不同箭头制作不同的标签

页面加载时的 JavaScript 加载屏幕

javascript - 通过 jquery/javascript 动画添加一个类

jquery - 使用 jQuery 定位特定的 href

javascript - React Native setState() 和 Android 上的动画

javascript - 如何使用 jQuery 禁用/启用按钮?

javascript - 一个页面上有多个 jQuery 事件监听器

jquery - jquery mobile 中面板显示的事件