Question

我正在尝试使用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);
}

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

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

非常感谢任何有关最佳实践方法的指导。

Answer 1

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

对于你正在做的事情，我没有理由打电话给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);

Answer 2

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

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

})();

Answer 3

我会说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);
}

在JavaScript中正确处理setTimeout

3 个答案: