用Javascript更好的方式编写这个动画

Javascript better way to code this animation

本文关键字：动画 方式编 Javascript 更好      更新时间：2023-09-26

我首先尝试将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);
}

使用闭包，您还希望使用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);
}

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

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

演示

购买前试用

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

  • 试着做一个有意义的函数
  • 试着用有意义和清晰的名称对数字进行参数化
  • 编写干净的代码

让我给你我的版本，我知道你正在努力做什么。正如你所看到的，它更干净，更容易为他人阅读/理解。

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

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/

相关文章：