javascript - 如何卡住 Javascript 超时和 BS4/jQuery 动画？

Question

我有一个有超时的 HTML 页面。我想在您按下按钮 (#pauseButton) 时卡住它们，然后在您再次按下它时恢复，最好也卡住所有 BS4 和 jQuery 动画。

<button id="pauseButton"></button>
<script>
$(document).ready(function(){
    setTimeout(function() {
        alert("This is an alert")
    },10000);
    $("#pauseButton").click(function(){
        // Pause timeouts and page
    });
});
</script>

编辑
我被告知可能有重复的答案，所以我现在专注于暂停动画和其他页面元素。该答案显示了如何仅暂停超时。

Answer 1

有很多方法可以解决这个问题。 question 中提到了其中许多正如@EmadZamout 在评论中提到的那样。

但是，如果您正在寻找一种简单且可能是替代的方法来解决此问题。尝试这个。这里我使用requestAnimationFrame来解决问题

let ran = Date.now(); // contains the last updated time
let time = 0; // time in seconds
let paused = false; // store the state

const func = () => {
  if (!paused && Date.now() - ran > 1000) {
    time++;
    ran = Date.now();
    console.log('now')
  }

  if (time === 8)
    return alert('This works!');

  requestAnimationFrame(func);
}

func();

document.querySelector('button').addEventListener('click', () => paused = !paused);

<button>Change state</button>

For stopping all the animations of the website, you need to manually stop each animation.

要停止 jQuery 动画，您可以使用 .stop() helper 。一个例子:

let paused = false; // state of the animation
let dir = 'down'; // to store the direction of animation so that the next time continues in the correct direction
let timeDown = 2000; // to animate properly after resuming
let timeUp = 2000; // to animate properly after resuming

// the initial calling of the animation
(function() {
  slideDown();
})();


// function which resumes the animation
function animate() {
  switch (dir) {
    case 'up':
      slideUp();
      break;
    case 'down':
      slideDown();
      break;
  }
}

// a function to animate in the uppward direction
function slideUp() {
  dir = 'up'; // setting direction to up
  timeDown = 2000; // resetting the duration for slideDown function
  
  $('div').stop().animate({
    left: 0
  }, {
    duration: timeUp,
    complete: slideDown, // calling slideDown function on complete
    progress: function (animation, progress, ms) {
      timeUp = ms; // changing the duration so that it looks smooth when the animation is resumed
    }
  }); // actual animation
}

// a function to animate in the downward direction
function slideDown() {
  dir = 'down'; // setting direction to down
  timeUp = 2000; // resetting the duration for slideDown function
  
  $('div').stop().animate({
    left: 200
  }, {
    duration: timeDown,
    complete: slideUp, // calling slideUp function on complete
    progress: function (animation, progress, ms) {
      timeDown = ms; // changing the duration so that it looks smooth when the animation is resumed
    }
  }); // actual animation
}

// button click event listener
$('button').click(function() {
  if (paused)
    animate(); // to resume the animation
  else
    $('div').stop(); // to stop all the animations on the object
    
  paused = !paused; // toggling state
});

div {
  position: relative;
  width: 100px;
  height: 100px;
  background: dodgerblue;
}

<button>Pause</button>

<div></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

对于 Bootstrap ，我认为您没有任何需要在您提到的这种情况下暂停的 Bootstrap 动画，因为 Bootstrap 动画取决于用户交互。如果你想阻止用户交互，你可以在网站上放置一个覆盖层，上面写着“暂停”。或者，如果您不想这样做，您可以使用 CSS 属性 pointer-events: none 来禁用所有指针事件。

现在对于 CSS 动画，您可以设置一个名为 animation-play-state 的属性到暂停。

如果您想在用户不在页面上时将动画状态更改为暂停(据我了解您更新的问题)，您可以使用新的 visibilityState API。有一个事件 visibilitychange，当可见性发生变化时会触发该事件。

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
  document.querySelector('div').innerHTML = document.visibilityState;
});

<div>
  Try opening a different tab or change the focus to another app
</div>