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

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

演示

先试后买

编辑

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

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

演示

先试后买

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/