Javascript动画例程

Javascript Animation Routine

本文关键字：例程 动画 Javascript      更新时间：2023-09-26

我正在用Javascript做一些简单的动画。考虑到最近东海岸发生的地震，我实现了一个地震效果，当您单击一个按钮时，信息表会在周围挤一段时间。

我有一个效用函数，它在设定的间隔内重复调用另一个函数。然后它调用第二个函数当它调用第一个函数很多次之后。这样你就可以在动画结束时安排一些事情发生。下面是它的代码:

function countIterate(timeout, count, func1, func2)
{
    if (count > 0) {
        func1();
        setTimeout(function() { countIterate(timeout, --count, func1, func2); }, timeout);
    }
    else
        func2();
}

以下是地震例行程序:

function earthQuake()
{
    console.log("earthQuake()");
    $("table").css("position", "relative");
    var quake = function(magnitude)
    {
        var top = Math.floor(Math.random() * (2 * magnitude + 1)) - magnitude;
        var left = Math.floor(Math.random() * (2 * magnitude + 1)) - magnitude;
        $("table").css("top", top).css("left", left);
    }
    var func = new Array();
    func[0] = function() {};
    for (var i = 1; i <= 4; i++) {
        func[i] = function() { countIterate(35, 40, function() { quake(i); }, func[i-1]); };
        console.log(func[i]);
    }
    func[4]();
}

不幸的是，我得到了一个无限地震循环。

如果我硬编码东西而不是for循环:

var func0 = function() {};
var func1 = function() { countIterate(35, 40, function() { quake(1); }, func0); };
var func2 = function() { countIterate(35, 40, function() { quake(2); }, func1); };
var func3 = function() { countIterate(35, 40, function() { quake(3); }, func2); };
var func4 = function() { countIterate(35, 40, function() { quake(4); }, func3); };
func4();

可以正常工作。但这是一个丑陋的解决方案。

顺便说一下，下面是第一个(更优雅，但有问题)解决方案的console.log()输出: 
function () { countIterate(35, 40, function() { quake(i); }, func[i-1]); }
function () { countIterate(35, 40, function() { quake(i); }, func[i-1]); }
function () { countIterate(35, 40, function() { quake(i); }, func[i-1]); }
function () { countIterate(35, 40, function() { quake(i); }, func[i-1]); }

如果有一些库可以处理这类事情，请让我知道，但我还是想让这个版本工作作为一个学习经验。

功能:

function() { countIterate(35, 40, function() { quake(i); }, func[i-1]); }

总是在i = 5时执行，因为到达func[4]();时for循环已经完成。通过从另一个函数返回函数，将i的值绑定到函数，可以很容易地显示出问题所在:

(function(i) {
    return function() {
        countIterate(35, 40, function() { quake(i); }, func[i-1]);
    };
}(i))

要进一步解释，您可以参考这里问过的许多其他"For循环问题"的答案，包括Javascript臭名昭着的循环问题的最佳答案?

相关文章：