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中获取有关Event Loop的更多知识，这些链接对我有帮助：https://www.youtube.com/watch?v=8aGhZQkoFbQ @编辑：在你的情况下，你可能会制定条件，当达到某种规模的上限时，可能会停止定义的间隔。

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

Answer 2

创建＆＃34; interval＆＃34;全局变量有帮助吗？

即

var interval; $（document）.ready（function（）{ ...

setInterval函数导致控制台多次记录

2 个答案: