Javascript setinterval和clearinterval

Question

我试图让图像看起来正在倒下。所以我制作了一个div，并将其中的图像。使用setinterval和clearinterval我试图让图像停止在div的边框，但我不知道如何做到这一点。 这里是代码：

var x = 200; 
var y = -155; 
var inc = 5; 

var myVar; 

var fall = function() { 
myVar = setInterval(function(){moveDown();},30); 
}; 
var stopFall = function() { 
clearInterval(myVar); 
}; 
var moveDown = function() { 
y += inc; 

document.getElementById('img1').style.top = y + 'px'; 
}; 

我想setinterval时，自动终止y = 155但我不知道怎么办。我试过，如果，虽然和陈述，但他们似乎并没有工作.. 我做了一个按钮，运行stopFall();它的工作原理，但我希望它自动停止，无需点击任何按钮。有谁知道如何做到这一点？

Answer 1

更改您的moveDown()函数以检查y的当前状态，如有必要请拨打stopFall()。

var moveDown = function() { 
    y += inc; 

    if (y >= 155) { stopFall(); } 

    document.getElementById('img1').style.top = y + 'px'; 
}; 

作为替代，你可以使用clearInterval()直接这样

var moveDown = function() { 
    y += inc; 

    if (y >= 155) { 
    clearInterval(myVar); 
    } 

    document.getElementById('img1').style.top = y + 'px'; 
}; 

Answer 2

var x = 200; 
var y = -155; 
var inc = 5; 

var myVar; 

var fall = function() { 
     myVar = setInterval(function(){ 
     if(y >= 155) clearInterval(myVar); 
     moveDown(); 
     }, 
     30); 
}; 

var moveDown = function() { 
    y += inc; 

    document.getElementById('img1').style.top = y + 'px'; 
};