clearInterval issue (jquery, javascript)

clearInterval issue (jquery, javascript)

本文关键字：javascript jquery issue clearInterval      更新时间：2023-09-26

我在学校的作业上遇到了一些问题。无论如何，当我使用startInterval时，我分配和intervalID，这样我就可以稍后清除interval。不幸的是，当你按下"停止这种疯狂"按钮时，它并不清楚。有人知道为什么吗?

(如果你想知道所有的背景颜色的东西，我使用了一个jquery插件，我没有添加到这个片段)

var intervalID;
$('.gal').click(function() {
  var photoID = jQuery(this).attr("id");
  alert(alerts[photoID]);
});
var alerts = {
  //row one
  "1:1": "This animal is a penguin!",
  "1:2": "This animal is a lion!",
  "1:3": "This animal is a cat!",
  "1:4": "This animal is a giraffe!",
  //row two
  "2:1": "Cool looking ancient building!",
  "2:2": "Cool looking modern building!",
  "2:3": "Cool building from dubai!",
  "2:4": "Cool building by the water!"
};
$("#stop").click(function() {
  clearInterval(intervalID);
});
$(window).load(function() {
  animate();
});
function animate() {
  intervalID = setInterval(function() {
    var width = 25;
    $(".gal").animate({
      'marginLeft': '-=25px'
    });
    $(".gal").animate({
      'marginLeft': '+=25px'
    });
    $("#title").animate({
      'marginLeft': '+=' + width + 'px'
    }, "slow");
    $("#title").animate({
      'marginLeft': '-=' + width + 'px'
    }, "slow");
    $("body").animate({
      'backgroundColor': 'lightyellow'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'yellow'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'orange'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'red'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'lightpink'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'pink'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'purple'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'blue'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'lightblue'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'cyan'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'green'
    }, 1000);
    $("body").animate({
      'backgroundColor': 'lightgreen'
    }, 1000);
  }, 0.1);
}
body {
  background-color: lightyellow;
}
#title {
  display: block;
  /*position:absolute;*/
}
.gal {
  display: block;
  margin: 20px;
  width: 250px;
  height: 200px;
  border: 5px solid black;
}
#stop {
  position: fixed;
  bottom: 0;
  right: 0;
  border: 3px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>JS Functions</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container-fluid">
    <button id="stop" class="btn-warning">Stop This Madness!</button>
    <h1 id="title" style="margin-left: 20px;" class="text-primary">Image Gallery:</h1>
    <div class="row">
      <div class="col-md-3">
        <img id="1:1" src="http://ngm.nationalgeographic.com/2012/11/emperor-penguins/img/02-airborne-penguin-exits-water_1600.jpg" class="gal">
      </div>
      <div class="col-md-3">
        <img id="1:2" src="http://efdreams.com/data_images/dreams/lion/lion-03.jpg" class="gal">
      </div>
      <div class="col-md-3">
        <img id="1:3" src="https://s3.graphiq.com/sites/default/files/stories/t2/tiny_cat_12573_8950.jpg" class="gal" />
      </div>
      <div class="col-md-3">
        <img id="1:4" src="https://upload.wikimedia.org/wikipedia/commons/0/02/Giraffe_Ithala_KZN_South_Africa_Luca_Galuzzi_2004.JPG" class="gal">
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <img id="2:1" src="http://cdn.mos.cms.futurecdn.net/78b7453e70727aae7eed989ff2cee83d.jpg" class="gal" />
      </div>
      <div class="col-md-3">
        <img id="2:2" src="http://thegrumpyoldlimey.com/images/buildings/dome_feature.jpg" class="gal" />
      </div>
      <div class="col-md-3">
        <img id="2:3" src="https://d3dupjkkwlat3o.cloudfront.net/399433011453/2071971/576xN?1410992818" class="gal" />
      </div>
      <div class="col-md-3">
        <img id="2:4" src="http://www.jazzhostels.com/blog/wp-content/uploads/2014/09/hemispheric-photo-valencia-spain-cc.jpg" class="gal">
      </div>
    </div>
  </div>
  <script></script>
  <script src="script.js"></script>
</body>
</html>

有两点你需要知道:

  1. setInterval()的延迟以毫秒为单位指定，并且您已经指定了0.1的延迟-这意味着您已经尝试将您的函数调度为每秒运行10,000次。在实践中，JS不会让你低于5ms:任何指定的更短的延迟都将四舍五入，但仍然意味着你的函数将每秒运行大约200次。

  2. 当你在同一元素上多次调用.animate()时，就像你在.gal, #title和body上做的那样，它会排队等待在当前动画完成后运行的额外动画。

把这两点放在一起，你的代码每5毫秒向队列添加多个动画，每个动画花费的时间都比5毫秒长得多。所以当你调用clearInterval()时，你已经有大量的动画在排队，它们需要很长时间才能完成。

你可以停止当前正在进行的动画，并使用.stop()方法清除给定元素的动画队列:

$(".gal").stop(true);

但是尝试使用setInterval()管理正在进行的动画总是会有点笨拙，特别是当你有多个动画与不同的时间指定。但幸运的是，.animate()方法允许您提供一个回调函数，该函数将在动画完成后运行，因此您可以从那里调度额外的处理。

您在评论中询问是否有更有效的方法来管理动画:对于所有这些颜色变化，我建议使用数组，然后当当前颜色变化完成时再次调用.animate()为数组中的下一个颜色。

所以可能像下面这样，注意我已经删除了一些与动画无关的代码，以便使这个答案更短一些，并且我已经将动画代码分成三个函数，以便您更清楚地了解每个函数的作用:

$("#stop").click(function() {
  $(".gal, #title, body").stop(true);
});
$(window).load(function() {
  animateGallery();
  animateTitle();
  animateBody();
});
function animateGallery() {
  $(".gal").animate({
    'marginLeft': '-=25px'
  }, "slow").animate({
    'marginLeft': '+=25px'
  }, "slow", animateGallery); // note the function set as final argument
                              // - it will be called when animation finishes
}
function animateTitle() {
  var width = 25;
  $("#title").animate({
    'marginLeft': '+=' + width + 'px'
  }, "slow").animate({
    'marginLeft': '-=' + width + 'px'
  }, "slow", animateTitle); // note the function set as final argument
}
    
var colors = ['lightyellow', 'yellow', 'orange', 'red', 'lightpink', 'pink', 'purple', 'blue', 'lightblue', 'cyan', 'green', 'lightgreen'];
var currentColor = 0;
function animateBody() {
  $("body").animate({
    'backgroundColor': colors[currentColor]
  }, 1000, animateBody); // note the function set as final argument
  currentColor = (currentColor + 1) % colors.length;
}
#title { display: block; }
.gal { display: block; margin: 20px; width: 250px; height: 200px; border: 5px solid black; }
#stop { position: fixed; z-index: 100; bottom: 0; right: 0; border: 3px solid red; }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>JS Functions</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
</head>
<body>
  <div class="container-fluid">
    <button id="stop" class="btn-warning">Stop This Madness!</button>
    <h1 id="title" style="margin-left: 20px;" class="text-primary">Image Gallery:</h1>
    <div class="row">
      <div class="col-md-3">
        <img id="2:1" src="http://cdn.mos.cms.futurecdn.net/78b7453e70727aae7eed989ff2cee83d.jpg" class="gal" />
      </div>
      <div class="col-md-3">
        <img id="2:2" src="http://thegrumpyoldlimey.com/images/buildings/dome_feature.jpg" class="gal" />
      </div>
      <div class="col-md-3">
        <img id="2:3" src="https://d3dupjkkwlat3o.cloudfront.net/399433011453/2071971/576xN?1410992818" class="gal" />
      </div>
      <div class="col-md-3">
        <img id="2:4" src="http://www.jazzhostels.com/blog/wp-content/uploads/2014/09/hemispheric-photo-valencia-spain-cc.jpg" class="gal">
      </div>
    </div>
  </div>
</body>
</html>

相关文章：