Question

在我的下面的代码中，我希望diag1 div在每个动画结束后缓慢增加。相反，它立即进入20并且动画滞后。我认为.animate中函数参数的重点是在完成动画后回调函数。有人可以发现我的问题吗？

<!DOCTYPE html>
<html>
    <head>
        <title>TST</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" href="http://api.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
        <script>
            PLAY=true;
            END_TIME = 20;
            CURRENT_TIME = 1;

            function scrollManager() {
                if(PLAY==true && CURRENT_TIME < END_TIME) {
                    CURRENT_TIME++;
                    scrollLeft();
                }
            }

            function scrollLeft() {
                $('#diag1').html(CURRENT_TIME);
                $('#s6').animate(
                    {'padding-left': '-=5%'},
                    1000, 'linear', scrollManager());
            }

            $(function() {
                $('#play_button').click(function() {
                    PLAY = true;
                    scrollManager();
                });
            });
        </script>
    </head>

    <body>
        <div class="app">
            <div id="ui">
                <button id="play_button">Play</button>
                <div class="row">
                    <div class="tst1">
                        <div id="s6" style="padding-left:70%;width:5%;background-color:red;">
                            <div>TEST</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="diag1">Diagnostic 1: </div>
        </div>
    </body>
</html>

Answer 1

删除scrollManager上的()。 ()是一个在JS中调用函数的运算符。

$('#s6').animate({'padding-left': '-=5%'}, 1000, 'linear', scrollManager);

Answer 2

这是因为在scrollLeft内部和animate函数调用内部，期望的参数是回调。但是，您提供了undefined而不是回调。

$('#s6').animate(
 {'padding-left': '-=5%'},
 1000, 'linear', scrollManager()
);

使用scrollManager()，将使用该函数调用中的返回的值作为回调。由于没有返回值，因此undefined被分配给回调值。

发生的事情是scrollManager()被调用。而这又反过来调用scrollLeft（本质上是一个递归调用）。这种递归发生直到if(PLAY==true && CURRENT_TIME < END_TIME)为假。

回调值要求使用函数句柄或匿名函数，因此您应该使用

$('#s6').animate(
 {'padding-left': '-=5%'},
 1000, 'linear', scrollManager
);

动画完全立即发射

2 个答案: