Question

求解：Javascript如何控制定时执行

目标：
要让网页上的一张图片的宽度逐渐加大，形成动画效果，如何写代码？
我写了一段利用setTimeout的代码结果就是不行，请教原因！

代码如下：
<img src="http://www.sharejs.com/code/gg/jcommon6/01.jpg" id='img' alt="" />
<script>
var x=document.getElementById('img');
function resize(x){
x.width++;
}
while(x.width<1000){
setTimeout(resize(x), 500);
}

</script>

Answer 1

实际上你的代码并未起到定时器的作用。因为，你在一次循环里设置了所有的setTimeout。由于所有定时器的延时都是相等的，那么这些setTimeout都会同时执行。

所以程序的作用是：在一定的时间间隔后，元素长度一次性变得非常大，看不到平滑缩放动画的效果。而且这个循环执行的次数会非常多，因为在延迟还未结束时，元素的长度不变，循环不会结束。

现在你要做的时：在每次宽度增加以后，再生成一个新的定时器。

建议采用递归的方式执行：

// 方法一：使用全局变量
window.x = x;
function resize() {
    window.x.width++;
    if (window.x.width < 1000) {
        setTimeout('resize()', 500);
    }
}
resize();

// 方法二：使用闭包, 避免污染全局变量
function resize_animate(x) {
    function resize() {
        x.width++;
        if (x.width < 1000) {
            setTimeout('resize()', 500);
        }
    }
    resize();
}
resize_animate(x);

追问

我还是不太理解。
按照我的第一次的写法，
开始先检查X.width是否到达1000像素，如果没有到达，则在500毫秒以后执行“x.width++”；然后再检查有没有到达1000像素。。。。

我不明白为什么x.width会一下子增加到1000.

追答

但是500毫秒后，所有的延时一股脑都开始执行。。而且x.width很可能会比1000像素大。因为刚开始元素的长度是不变的，循环瞬间执行了很多次。500毫秒后，多少个长度加1会执行呢？

Answer 2

你好:
这样写的代码执行的效率非常底,你可以采用jquery实现,jquery有相应的函数实现,例如:ainimate;

希望可以帮助到你.

Answer 3

用setInterval也可以。。setTimeout是延迟执行，你这么写只会执行一次

<script>
var x=document.getElementById('img');
function resize(x){
	x.width++;
}
var time = setInterval(function(){
        resize(x);
        if(x.width>1000){
            clearInterval(time);
        }
    },500)