javascript - setInterval 函数导致控制台多次记录某些内容

Question

我有一个使用 setInterval 来增加图像大小并显示关闭按钮的函数。单击关闭按钮后，图像尺寸再次缩小。我还添加/删除了一些类等，但它只能工作一次，如果我再次减小大小，格式就会开始困惑，因此在尝试调试时，我添加了 console.log('test') 并注意到它被记录为每次关闭图像时都会增加时间。

例如，我第一次单击“关闭”，它就被正确记录一次。下次我关闭图像时，它总共被调用了 3 次，下次它总共被调用了 6 次。

当然，当高度降低到 200 时，控制台应该只记录一次。

HTML:

$(document).ready(function() {
  var images = document.querySelectorAll('.thumbnail');


  images.forEach(function(image) {
    image.addEventListener('click', enlarge);
  });

  function enlarge(e) {
    var image = e.target,
      interval,
      height = 200,
      width = 200,
      z = $(this).css("z-index"); //Obtain the current z-index of the image which has been clicked
    /*thisProduct = */

    $(this).css("z-index", z + 10); //increase the z-index of just the image which has been selected by 10

    $('#product-container').addClass('disable-click'); //Stops other products from being enlarged whilst another is
    $('.unhidden').not($(this).closest('.unhidden')).addClass('hide');
    $(this).parent().parent().css("float", "left");
    //$('.unhidden').not($(this)).addClass('noOpacity');
    //$('.unhidden').addClass("hide");


    $("#close-button").click(function() {
      $("#close-button").css("visibility", "hidden");
      $("#dimmed-cover").css("visibility", "hidden");


      interval = setInterval(function() {
        height -= 6.666; //Need to decrease by 400px so 400/60 = 6.666
        width -= 6.666;

        if (height <= 200 && width <= 200) { //Once is beyond the desired size, set the final dimensions
          height = 200;
          width = 200;

        }

        if (height === 200 && width === 200) {
          clearInterval(interval);
          console.log("test")
          $('.unhidden').removeClass('hide');
          $('.unhidden').css("float", "none");
        }

        image.style.height = height + 'px';
        image.style.width = width + 'px';
      }, 8.334);


    });

    interval = setInterval(function() {
      height += 6.666; //Need to enlarge by 400px so 400/60 = 6.666
      width += 6.666;

      if (height >= 600 && width >= 600) { //Once is beyond the desired size, set the final dimensions
        height = 600;
        width = 600;
        clearInterval(interval);
        $("#close-button").css("visibility", "visible"); //Making these visible AFTER the image has enlarged to prevent a bug happening if the user clicks close
        $("#dimmed-cover").css("visibility", "visible"); //before the image has finished enlarging
      }

      image.style.height = height + 'px';
      image.style.width = width + 'px';
    }, 8.334); //1000/60 = 16.667 fps

  }

  $("#close-button").click(function() {
    $('#product-container').removeClass('disable-click'); //Enable other products to be clicked again
    $('.thumbnail').css("z-index", 1200); //Resets the z-index of all images to the same value to prevent a thumbnail being over the top of an enlarged image
  });

});

    #product-container {
        width: 100%;
        height: 100%;
        padding-top: 25px;
    }
    
    .product-wrapper {
        width: 80%;
        height: 100%;
        margin: 0px auto;
        text-align: center;
    }
    
    #product {
        display: inline-block;
        height: 252px;
        width: 200px;
        margin: 10px;
        border: solid 2px black;
    }
    
    .image-container {
        height: 200px;
        width: 200px;
    }
    
    .product-text {
        font-family: 'Open Sans Condensed';
        font-size: 20px;
        padding: 0;
        height: 50px;
        width: 100%;
        text-align: center;
        color: black;
        font-weight: 700;
        line-height: 50px;
        border-top: solid 2px black;
        background: #009641; /* Old browsers */
        background: -moz-linear-gradient(top, #009641 0%, #a1d54f 96%, #80c217 100%, #7cbc0a 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }
    
    .thumbnail {
        position: relative;
        height: 200px;
        width: 200px;
        cursor: pointer;
        z-index: 1200;
    }
    
    .unhidden {
        
    }

#dimmed-cover { /* dims the background apart from the header and the form*/
    background: black;
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 1100;
}

#close-button { /* button to close the hidden-window */
    position: fixed;
    background: white;
    right: 0;
    top: 100px;
    z-index: 1200;
    visibility: hidden;
    color: white;
    padding: 10px 50px 10px 50px;
    background: #009641;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dimmed-cover"></div>
<div id="close-button">Close.</div>

<div id="product-container">
                            <div class="product-wrapper">
                                <div id="product" class="unhidden">
                                    <div class="image-container">
                                    <img src="assets/home-bg.jpg" class="thumbnail">
                                    </div>    
                                    <div class="product-text">
                                        TEST
                                    </div>
                                </div>
    
                                <div id="product" class="unhidden">
                                    <div class="image-container">
                                    <img src="assets/enchilada.jpg" class="thumbnail">
                                    </div>    
                                    <div class="product-text">
                                        TEST
                                    </div>
                                </div>
    
                                <div id="product" class="unhidden">
                                    <div class="image-container">
                                    <img src="assets/quesadilla.jpg" class="thumbnail">
                                    </div>    
                                    <div class="product-text">
                                        TEST
                                    </div>
                                </div>
    
                                <div id="product" class="unhidden">
                                    <div class="image-container">
                                    <img src="assets/shrimp.jpg" class="thumbnail">
                                    </div>    
                                    <div class="product-text">
                                        TEST
                                    </div>
                                </div>
    
                                <div id="product" class="unhidden">
                                    <div class="image-container">
                                    <img src="assets/tacos.jpg" class="thumbnail">
                                    </div>    
                                    <div class="product-text">
                                        TEST
                                    </div>
                                </div>
    
                                <div id="product" class="unhidden">
                                    <div class="image-container">
                                    <img src="assets/tortilla.jpg" class="thumbnail">
                                    </div>    
                                    <div class="product-text">
                                        TEST
                                    </div>
                                </div>
                            </div>
                        </div> <!-- Product container -->

Answer 1

间隔在您终止进程或决定停止它时开始运行。您可以使用 clearInterval() (link) 来停止它函数是 webAPI 的一部分。有一个简单的例子它是如何工作的:https://jsfiddle.net/1f4Lsp61/我想建议您了解有关 JavaScript 中事件循环的更多知识，有一个对我有帮助的链接:https://www.youtube.com/watch?v=8aGhZQkoFbQ@编辑:在您的情况下，您可以制定条件，当达到某个大小上限时，可能会停止定义的间隔。

@Edit2 [主要]:在代码的第 26 行 $("#close-button").click(function() 中，每次放大图像时都会添加事件处理程序。您必须通过 .off( 分离它们) 运算符。有工作示例 $("#close-button").off().click(function()。