-1

最初に関数に 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);

}
4

3 に答える 3

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);
}
于 2013-09-01T16:54:40.150 に答える
0

これが更新されたコードです。間隔を作成する必要があるのは 1 回だけです。変数に格納し、最大値に達したらクリアします。

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

デモ

購入前にお試しください

于 2013-09-01T16:42:26.157 に答える
0

コーディング スタイルを改善するためのいくつかのアドバイスを次に示します。

  • 意味のある関数を作ってみてください
  • 意味のある明確な名前で数値をパラメーター化するようにしてください
  • きれいなコードを書く

あなたがやろうとしていることを私が理解していることの私のバージョンをあなたに与えましょう。ご覧のとおり、よりクリーンで読みやすく、他の人にとって理解しやすいものになっています。

操作できるように、ライブ デモを下部に含めました。

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/

于 2013-09-01T16:59:02.330 に答える