Question

基本上，我需要在14秒后完全重新加载/重新初始化横幅动画，但仅仅13秒后 - 我想关闭其中一些（缓动），所以一切都可以停止并在另一次运行之前做好准备。

我试过以下代码但没有运气：

banner.init();

setInterval(function() {
    setTimeout(function() {
        banner.wheel(); // Shuts down the wheel with 1s easing
        banner.deinitialize(); // Sets all animations to initial stage
    }, 13000);
    banner.wheel(true); // Does turn the spinning wheel back on
    banner.init(); // Puts all reinitialized animations back in motion
}, 14000);

我不能使用纯JS以外的任何东西。你有任何想法如何解决它？

Answer 1

超时将在14秒间隔后触发13秒。你需要反转它们：

setInterval(function () {
    setTimeout(function() {
        banner.wheel(true); // Does turn the spinning wheel back on
        banner.init(); // Puts all reinitialized animations back in motion
    }, 1000);
    banner.wheel(); // Shuts down the wheel with 1s easing
    banner.deinitialize(); // Sets all animations to initial stage
}, 13000);

这将触发13s之后的间隔，这将开始缓和，然后在1s之后将重新初始化其他横幅。

Answer 2

// Mock banner object for testing
var banner = {
  init: function(){console.log('banner.init')},
  wheel: function(on){console.log('Wheel', on)},
  deinitialize: function(){console.log('banner.deinitialize')},
}

banner.init();

function allOn() {
  banner.wheel(true); // Does turn the spinning wheel back on
  banner.init(); // Puts all reinitialized animations back in motion
}
function spinDown(){
  banner.wheel(); // Shuts down the wheel with 1s easing
  banner.deinitialize(); // Sets all animations to initial stage
}
function animateBanner(){
  allOn()
  setTimeout(spinDown, 13000);
}

setInterval(animateBanner, 14000);

JavaScript SetInterval / setTimeout问题

2 个答案: