Question

我正在尝试使背景和文字闪烁黑白，然后在您点击暂停时停止，但我注意到当您按下暂停按钮时有一个显着的延迟，延迟增加您让动画播放的时间越长

我正在使用一个jquery插件Velocity.js来制作动画。

    $(document).ready(function() {
  var $title = $("#title");
  var $body = $("body");

  function blackout() {
    $title.velocity({
        colorRed: '+=100%',
        colorBlue: '+=100%',
        colorGreen: '+=100%'}, {loop: 1, duration: 50});
    $body.velocity({
        backgroundColorRed: '-=100%',
        backgroundColorBlue: '-=100%',
        backgroundColorGreen: '-=100%'
        }, {loop: 1, duration: 50})
    };

  $("#play").click(function() {
  var blackoutloop = setInterval(blackout, 100);
    $("#pause").click(function() {
        clearInterval(blackoutloop);
    });
  });

});

导致延迟的原因是什么？如何解决？

Answer 1

问题在于你的代码隐含地假设时间安排得很好，但实际上它不会。 Velocity.js代码在实现动画时会耗费一些时间进行DOM操作，所以每100毫秒你就会开始一些有点延迟的动画。您允许该页面使您附近的所有癫痫症丧失能力的时间越长，延迟时间就越长。

如果你将功能的计时器提升到大约150毫秒，那么（至少在我的环境中）它会立即停止点击＆＃34;暂停＆＃34;。但请注意，我修复了代码中的错误。不要设置＆＃34;暂停＆＃34; ＆＃34; play＆＃34;中的处理程序处理程序。相反，这样做：

  var blackoutloop;
  $("#play").click(function() {
    blackoutloop = setInterval(blackout, 150);
  });

  $("#pause").click(function() {
        clearInterval(blackoutloop);
  });

另外，在jsfiddle中：

请勿在HTML部分中添加<body>标记 - 该网站会为您执行此操作
如果你正在使用＆＃34; On load＆＃34;您的代码的选项（作为您的小提琴），没有必要将代码包装在$(document).ready()调用中，因为该网站会将其放入＆＃34;加载＆＃34; window上的事件处理程序。

立即停止setInterval

1 个答案: