jquery - 为什么我的 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

我相信绑定(bind)到滚动事件的 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));
    }
});

这将使代码更易于维护，而且我相信只有 1 个函数绑定(bind)到滚动事件可能会解决您的问题。

编辑

另一种方法是存储应该获得 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));
    }
});