0

我正在尝试使用 JavaScript 为页面上的某些元素设置动画（带有精灵的 CSS 动画不适用于我需要做的事情）。

我目前正在做这样的事情；

function animate_element(current_id)
{
    var next_id = parseInt(current_id, 10) + 1;
    $('#lighthouse')[0].src = '/element_' + next_id + '.png';

    if (next_id >= 8) {
        next_id = 0;
    }     

    setTimeout(function() {
        animate_element(next_id);
    }, 750);
}

从技术上讲，这是可行的，但这将是页面上许多类似的动画之一，我担心这是一种低效的方法。

我知道最好的做法是clearTimeout()在调用 setTimeout 之前使用，但我不知道如何记录 setTimeout 并将其递归地传递给自身（如果这有任何意义！）。

任何有关执行此操作的最佳实践方式的指导将不胜感激。

4

3 回答 3

2

“我知道最好的做法是clearTimeout()在调用 setTimeout 之前使用......”

对于你正在做的事情，没有理由打电话clearTimeout()，因为下一个电话永远不会发生，直到最后一个电话被执行。

在这一点上，没有什么需要澄清的。

FWIW，您的代码可以缩短一点：

function animate_element(current_id) {
    current_id = parseInt(current_id, 10);

    function cycle() {
        document.getElementById('lighthouse').src = '/element_' + current_id + '.png';
        current_id = ++current_id % 8
        setTimeout(cycle, 750);
    }
}

animate_element(0);

或者，如果有几个相同的，只是使用不同的 ID，您可以像这样使其可重用：

function animate_element(id, idx) {
    idx = parseInt(idx, 10);

    function cycle() {
        document.getElementById(id).src = '/element_' + idx + '.png';
        idx = ++idx % 8
        setTimeout(cycle, 750);
    }
}

animate_element('lighthouse', 0);
于 2012-10-30T21:34:01.027 回答
1

没有仔细查看您的代码或您在做什么，但如果您想保留该值，您可以关闭变量：

var animate_element = (function(){

   var timer;

   return function(current_id)
   {
       var next_id = parseInt(current_id, 10) + 1;
       $('#lighthouse')[0].src = '/element_' + next_id + '.png';

       if (next_id >= 8) {
           next_id = 0;
       }     

       clearTimeout(timer);
       timer = setTimeout(function() {
          animate_element(next_id);
       }, 750);
   };

})();
于 2012-10-30T21:35:35.147 回答
1

我会说在你的情况下setInterval会更好。setTimeout

var current_id = 0;

function animate_element() {
  setInterval(function() {
    var next_id = parseInt(current_id, 10) + 1;
    $('#lighthouse')[0].src = '/element_' + next_id + '.png';

    if (next_id >= 8) {
        next_id = 0;
    }

    current_id = next_id;
  }, 750);
}
于 2012-10-30T21:39:22.390 回答