如何冻结 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

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

但是，如果您正在寻找一种简单的替代方法来解决此问题。试试这个。这里我使用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() 助手。一个例子：

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 动画取决于用户交互。如果你想阻止用户交互，你可以在网站上放置一个覆盖层 "Paused"。或者，如果您不想这样做，您可以使用 CSS 属性 pointer-events: none 来禁用所有指针事件。

现在对于 CSS 动画，您可以将名为 animation-play-state 的属性设置为 paused。

如果您想在用户不在页面上时将动画状态更改为暂停（据我了解您更新的问题），您可以使用新的 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>

如何冻结 Javascript 超时和 BS4/jQuery 动画？

How to freeze Javascript timeouts and BS4/jQuery animations?

javascript

jquery

settimeout