Javascript动画例程

我正在用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]();
}

它很好用。但这是一个丑陋的解决方案

顺便说一句，这里是第一个（更优雅但不完整）解决方案的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 loop问题”的答案，包括的顶级答案。
您能否展示一个丑陋的解决方案，以便我们了解您正在尝试做什么？
(function(i) {
    return function() {
        countIterate(35, 40, function() { quake(i); }, func[i-1]);
    };
}(i))