为什么我的jquery脚本在不同的时间动画？

Question

我的jquery片段在不同时间动画。我希望所有三个都在滚动时加载，但第一个图形在其他所有内容之前加载。这是我的代码：

<div class="container">
            <div class="row">
              <div class="row-centered">
                <div class="col-lg-3 col-centered">
                    <h1>Increase Sales Time</h1>
                    <div id="myStathalf1" data-startdegree="45" data-dimension="250" data-text="33%" data-info="Sales Time" data-width="30" data-fontsize="38" data-percent="33" data-fgcolor="#FF6961" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>
                </div>
                <div class="col-lg-3 col-centered">
                  <h1>Increase Clients</h1>
                    <div id="myStathalf2" data-startdegree="45" data-dimension="250" data-text="50%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="50" data-fgcolor="#FF6961" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>
                </div>
                <div class="col-lg-3 col-centered">
                  <h1>Decrease Operation Costs</h1>
                    <div id="myStathalf3" data-startdegree="45" data-dimension="250" data-text="50%" data-info="Sales Operations" data-width="30" data-fontsize="38" data-percent="50" data-fgcolor="#FF6961" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>
                </div>
                    <script>
                    $(function(){
                        var isGraph1Viewed=false;

                        $(window).scroll(function() {
                           if(isScrolledIntoView($('#myStathalf1')) && isGraph1Viewed==false){$('#myStathalf1').circliful();isGraph1Viewed=true;}
                        });

                        function isScrolledIntoView(elem){
                            var docViewTop = $(window).scrollTop();
                            var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
                            var elemTop = $(elem).offset().top;
                            var elemBottom = elemTop + $(elem).height();
                            return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
                        }
                    });
                    $(function(){
                        var isGraph2Viewed=false;

                        $(window).scroll(function() {
                           if(isScrolledIntoView($('#myStathalf2')) && isGraph2Viewed==false){$('#myStathalf2').circliful();isGraph2Viewed=true;}
                        });

                        function isScrolledIntoView(elem){
                            var docViewTop = $(window).scrollTop();
                            var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
                            var elemTop = $(elem).offset().top;
                            var elemBottom = elemTop + $(elem).height();
                            return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
                        }
                    });
                    $(function(){
                        var isGraph3Viewed=false;

                        $(window).scroll(function() {
                           if(isScrolledIntoView($('#myStathalf3')) && isGraph3Viewed==false){$('#myStathalf3').circliful();isGraph3Viewed=true;}
                        });

                        function isScrolledIntoView(elem){
                            var docViewTop = $(window).scrollTop();
                            var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
                            var elemTop = $(elem).offset().top;
                            var elemBottom = elemTop + $(elem).height();
                            return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
                        }
                    });

                    </script>
                </div>
            </div>
        </div>

我通常需要向下滚动图形myStathalf2或myStathalf3才能加载。

Answer 1

我相信绑定到scroll事件的3个函数中的每一个都是一个接一个地被触发，我建议将代码移动到一个：

$(function () {
    var isGraph1Viewed = false, isGraph2Viewed = false, isGraph3Viewed = false;
    $(window).scroll(function () {
        if (isScrolledIntoView($('#myStathalf1')) && isGraph1Viewed == false) {
            $('#myStathalf1').circliful();
            isGraph1Viewed = true;
        }

        if (isScrolledIntoView($('#myStathalf2')) && isGraph2Viewed == false) {
            $('#myStathalf2').circliful();
            isGraph2Viewed = true;
        }

        if (isScrolledIntoView($('#myStathalf3')) && isGraph3Viewed == false) {
            $('#myStathalf3').circliful();
            isGraph3Viewed = true;
        }
    });

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
    }
});

这将使代码更容易维护，并且我相信只有一个函数绑定到scroll事件可能会解决您的问题。

修改

另一种方法是存储应该调用circliful函数的元素的ID，然后加入它们并只调用一次该函数：

$(function () {
    var isGraph1Viewed = false, isGraph2Viewed = false, isGraph3Viewed = false;
    $(window).scroll(function () {
        var circle = [];
        if (isScrolledIntoView($('#myStathalf1')) && isGraph1Viewed == false) {
            circle.push("#myStathalf1");
            isGraph1Viewed = true;
        }

        if (isScrolledIntoView($('#myStathalf2')) && isGraph2Viewed == false) {
            circle.push("#myStathalf2");
            isGraph2Viewed = true;
        }

        if (isScrolledIntoView($('#myStathalf3')) && isGraph3Viewed == false) {
            circle.push("#myStathalf3");
            isGraph3Viewed = true;
        }

        $(circle.join(',')).circliful();
    });

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
    }
});