jquery - 同时使用 setTimeout 和 setInterval 可以吗？

Question

如何延迟执行由 30 个间隔为 50 毫秒的序列组成的动画？

$(function() {
    setInterval("anim1()", 50);
    setTimeout("anim1()", 3000); /* doesn't work */
});



function anim1() {
    var oCurBack = $('#fullback div.current');
    var oNxtBack = oCurBack.next();
    if (oNxtBack.length === 0)
        return;

    oNxtBack.addClass('current');
    oCurBack.removeClass('current').addClass('previous');
}   

Answer 1

假设:你想在3秒后开始间隔动画

• 将间隔放入您延迟的函数中
• 我使用 anim1 而不是 "anim1()" 因为使用字符串是隐藏的 eval
• 您可能想在您现在返回的地方停止动画

<小时/>

var tId; // have global id to store the interval 
$(function() {
  tId = setTimeout(function() { setInterval(anim1, 50) }, 3000); 
})

function anim1() {
  var oCurBack = $('#fullback div.current');
  var oNxtBack = oCurBack.next();
  if (oNxtBack.length === 0) {
     clearInterval(tId); // clear the interval now we are done
     return;
  }
  oNxtBack.addClass('current');
  oCurBack.removeClass('current').addClass('previous');
}   

要每 4 秒重复一次动画，请尝试

var tId1, tId2
$(function() {
  tId1 = setInterval(function() { 
    var $divs = $('#fullback div.current');
    $divs.removeClass(current); // remove all current
    $divs.eq(0).removeClass('previous').addClass('current'); // add on the first
    tId2 = setInterval(anim1, 50); 
  }, 3000); 
});


function anim1() {
  var oCurBack = $('#fullback div.current');
  var oNxtBack = oCurBack.next();
  if (oNxtBack.length === 0) {
     clearInterval(tId2); // clear the interval now we are done
     return;
  }
  oNxtBack.addClass('current');
  oCurBack.removeClass('current').addClass('previous');
}