while()卡死了

Question

我在写一个类似轮播的组件，一个容器中图片放大到一个值后换一个图片，继续放大，重复这个过程

用了requireJS

<script src="https://cdn.bootcss.com/require.js/2.3.4/require.js" data-main="js/main"></script>


<div id="cover">
    <div id="imgBox">
        <img src="images/6979b974a51a5fa66c22db8fa9feff5c.jpg">
    </div>
</div>

main.js

require(["./config"], function(){
    require(["jquery"], function($){
        require(["./carousel"], function(autoPlay){
            var img = $("img");
            autoPlay(img);
        })
    });
});

carousel.js

define(function(){
    var pathArr = [
        "images/0fad76a6669a0bc9dcac0f2bbcfac612.jpg",
        "images/6b44f9a15afb4b64a381595223cbd436.jpg",
        "images/6979b974a51a5fa66c22db8fa9feff5c.jpg",
        "images/e74b72fe6e3b58511faf41d89bc2ce38.jpg"
    ];
    var autoPlay = function(img){
        var imgOriginWidth = img.width();
        var imgFinalWidth = imgOriginWidth + 100;
        var imgOriginHeight = img.height();
        // 等比缩放
        var imgFinalHeight = (imgFinalWidth * imgOriginHeight)/imgOriginWidth;
        var i = 4;
        var counter = 0;
        // while(counter < i){
            if(img.width() < imgFinalWidth){
                img.stop().animate({
                    width: "+=100px",
                    height: "+=" + (imgFinalHeight - imgOriginHeight) + "px",
                    left: "-=50px",
                    top: "-=50px"
                }, 1000, function(){
                    currentIndex = pathArr.indexOf(img.attr("src"));
                    img.attr("src", pathArr[currentIndex + 1]);
                    img.css({
                        width: imgOriginWidth + "px",
                        height: imgOriginHeight + "px",
                        left: "0px",
                        top: "0px"
                    });
                    counter++;
                    console.log("执行");
                });
            }
        //}
    }
    return autoPlay;
})

我在回调函数中递增了计数器啊，为什么还会卡死。

Answer 1

我没有看你的逻辑，但是counter++;应该是写在if的外面。如果程序没有进if里面，就死循环了