Question

我首先尝试将y的值传递回函数，但是这会导致浏览器变慢，就好像创建了无限循环一样，外部帧变量会停止这个但是我宁愿保留所有变量内部功能，有没有一种方法可以实现这一点，而无需获得“反馈”？

var frame=0;

function launch(){

var el=document.getElementById("selection");

setInterval(function(){ drawer(el,frame);},300);

}

function drawer(el,y){

if(y<20){
frame++;
el.style.top=20+frame+"px";
setInterval(function(){ drawer(el,frame);},300);

}

Answer 1

使用闭包，您还希望使用setTimeout或者在完成时删除间隔：

function launch(){

    var animator = function(el) {
      var frame = 0;
      var _this = {
         draw : function() {
            frame += 1;
            el.style.top=20+frame+"px";
            if(frame < 20) {
                setTimeout(_this.draw, 300);
            }
         }
      }

      return _this;

    }(document.getElementById("selection"));

    setTimeout(animator.draw, 300);
}

Answer 2

这是更新后的代码。您只需创建一次间隔。将其存储在变量中，并在达到最大值时将其清除。

var frame = 0;
var running = null;
var max = 20;
var e = document.getElementById("selection");

function drawer() {
    ++frame
    e.style.top = 20 + frame + "px";

    if (frame == max) {
        clearInterval(running);
        running = null;
    }
}

running = setInterval(drawer, 300);

<强>演示

Try before buy

修改

正如您在问题中所说，您希望将所有变量保留在函数中，您可以使用：

function drawer(e, frame) {
    if ('undefined' == typeof e) {
        var e = document.getElementById("selection");
    }

    if ('undefined' == typeof frame) {
        var frame = 0;
    }

    ++frame
    e.style.top = 20 + frame + "px";

    if (frame <= 20) {
        setTimeout(function() { drawer(e, frame); }, 300);
    }
}

drawer();

<强>演示

Try before buy

Answer 3

以下是一些改进编码风格的建议：

尝试创造有意义的功能
尝试使用有意义且清晰的名称对数字进行参数化
写清洁代码

让我告诉你我的理解你想要做的事情。正如您所看到的，它更干净，更容易阅读/理解他人。

我在底部包含了一个现场演示，供你摆弄。

function launch() {
    var el = document.getElementById('selection'),
        maxY = 300,
        stepY = 20,
        interval = 100;
    animateY(el, maxY, stepY, interval);
}

function moveToY(el, y) {
    el.style.top = y + "px";
}

function animateY(el, maxY, stepY, interval) {
    var y = 0;
    var id = setInterval(function () {
        if (y < maxY) {
            y += stepY;
            moveToY(el, y);
        }
        else {
            clearInterval(id);
        }
    }, interval);
}

这是一个现场演示：http://jsfiddle.net/A53sy/2/

Javascript更好的方式来编码这个动画

3 个答案:

修改