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>

要停止网站上的所有动画，您需要手动停止每个动画。

要停止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>

对于自举，我认为您没有提到任何这种情况下需要暂停的自举动画，因为自举动画取决于用户的交互作用。如果要防止用户交互，可以在网站上放置一个“已暂停”的覆盖。或者，如果您不想这样做，可以使用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动画？

1 个答案: