Question

我的学校作业存在一些问题。无论如何，当我使用startInterval时，我分配和intervalID，以便稍后我可以清除间隔。不幸的是，当你按下＆＃34;停止这种疯狂时，它并不清楚。按钮。谁知道为什么？

（如果您想知道我使用的jquery插件的所有背景颜色，我没有添加到此代码段中）

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您需要了解的两个要点：

setInterval()的延迟以毫秒为单位指定，并指定了0.1的延迟 - 这意味着您已尝试将函数安排为每秒运行10000次。在实践中，JS不允许你在5ms内完成：指定的任何较短延迟将被四舍五入，但仍然意味着你的函数每秒运行大约200次。
当您使用.animate()，.gal和#title对同一元素多次致电body时，会排队其他动画将在当前完成后运行。

将这两点放在一起，每5ms你的代码就会在队列中添加多个动画，每个动画都要花费5ms以上的时间。所以，即使你打电话给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>

clearInterval问题（jquery，javascript）

1 个答案: