Question

到目前为止，我有一个用于在页面上移动元素的代码：http://jsfiddle.net/rwowf5j8/

<body onload="anim(document.getElementById('test'), 'left', 'px', 140, 300, 500);">
 <p id='test'>LOL</p>

<script>
    function anim(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}


    </script>
</body>

它工作得很好，但是我如何在这段代码中添加一个setInterval方法来实现这个功能＆＃34; anim＆＃34;定期重复以创造反复运动？

我尝试通过调用函数来更改标记：

<body onload="setInterval(anim(document.getElementById('test'), 'left', 'px', 140, 300, 500), 500);">

但这似乎不起作用。

Answer 1

setInterval()函数需要函数和延迟。您的anim函数不会返回任何内容，因此无效。

你需要这样的东西：

setInterval(function(){anim(document.getElementById('test'), 'left', 'px', 140, 300, 500)}, 500);

Answer 2

您可以在函数内部进行设置，以便在间隔后自行调用。

   function anim(elem,style,unit,from,to,time) {
        if( !elem) return;

        var start = new Date().getTime(),
            timer = setInterval(function() {
                var step = Math.min(1,(new Date().getTime()-start)/time);
                elem.style[style] = (from+step*(to-from))+unit;
                if( step == 1) clearInterval(timer);
            },25);
        elem.style[style] = from+unit;

        setInterval(function(){
            anim(elem,style,unit,from,to,time);
        }, time);

    }

Answer 3

无需将anim函数包装在另一个setInterval中，您可以通过更改

来制作循环动画

if( step == 1) clearInterval(timer);

到

if( step == 1) start = new Date().getTime();

请参阅fiddle

Answer 4

问题是第一个参数的内容需要介于引号之间或包含在函数中。

如果你改变了你拥有的东西：

<body onload="setInterval(anim(document.getElementById('test'), 'left', 'px', 140, 300, 500), 500);">

用单引号括起“anim”调用：

<body onload="setInterval('anim(document.getElementById(\'test\'), \'left\', \'px\', 140, 300, 500)', 500);">

看起来很难看，但效果还不错。你可以在这个jsfiddle中看到它：http://jsfiddle.net/rwowf5j8/1/

Answer 5

您需要在此处利用闭包或Function.bind。在setInterval示例中，在将anim的返回值传递给anim的调用之前，您直接调用setInterval。你打算做的是将函数本身传递给setInterval。您可以使用Function.bind传递所需的参数。

尝试使用<body onload="setInterval(anim.bind(undefined, document.getElementById('test'), 'left', 'px', 140, 300, 500));">

完整的例子如下。

function anim(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

#test {
position: absolute;
left: 140px;
}

<body onload="setInterval(anim.bind(undefined, document.getElementById('test'), 'left', 'px', 140, 300, 500));">
 <p id='test'>LOL</p>

Answer 6

将代码放在这样的匿名函数中：

<body onload="setInterval(function(){anim(document.getElementById('test'), 'left', 'px', 140, 300, 500)}, 500)">

用于动画的JavaScript setInterval

6 个答案: