【问题标题】:Stop executing function after one time Javascript一次Javascript后停止执行函数
【发布时间】:2021-01-15 13:46:10
【问题描述】:

我正在使用 JavaScript 编写一些计数器,但遇到了需要分隔符的大数字问题。所以我只为需要分隔符的计数器重写了一部分 JavaScript。我创建了一个单独的函数来创建分隔符。我还构建了计数器应该从滚动时的页面偏移开始。这是我的完整 JavaScript 代码:

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var element_position = $("#projecten-in-beeld").offset().top;
        $(window).on("scroll", function () {
            var y_scroll_pos = window.pageYOffset;
            var scroll_pos_test = element_position;

            if (y_scroll_pos > scroll_pos_test) {
                $(".fact-inhoud").each(function () {
                    var $this = $(this),
                        countTo = $this.attr("data-count");

                    $({ countNum: $this.text() }).animate(
                        {
                            countNum: countTo,
                        },

                        {
                            duration: 3000,
                            easing: "linear",
                            step: function () {
                                $this.text(Math.floor(this.countNum));
                            },
                            complete: function () {
                                $this.text(this.countNum);
                                //alert('finished');
                            },
                        }
                    );
                }); // end data-count
                $(".fact-inhoud2").each(function () {
                    var $this = $(this),
                        countTo = $this.attr("data-count2");

                    $({ countNum: $this.text() }).animate(
                        {
                            countNum: countTo,
                        },

                        {
                            duration: 5000,
                            easing: "linear",
                            step: function () {
                                $this.text(commaSeparateNumber(Math.floor(this.countNum)));
                            },
                            complete: function () {
                                $this.text(commaSeparateNumber(this.countNum));
                                //alert('finished');
                            },
                        }
                    );
                }); // end data-count
            }
        });
    });

    function commaSeparateNumber(val) {
        while (/(\d+)(\d{3})/.test(val.toString())) {
            val = val.toString().replace(/(\d+)(\d{3})/, "$1" + "." + "$2");
        }
        return val;
    }
</script>

它工作得很好,当我在计数器所在的 DIV 时,计数器开始运行。当我在柜台上滚动时,他们会停下来并继续计数他们停止的地方。当我滚动时,只有对分隔符使用“commaSeparateNumber”函数的新计数器从零开始。

由于某种原因,我怎样才能杀死这个只执行一次而不是每次再次滚动时执行的功能?

【问题讨论】:

  • 您使用的是 Windows“onScroll”,因此每次滚动时都会执行...

标签: javascript function counter


【解决方案1】:

您可以使用布尔标志获得类似的结果:

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var isExecuted = false;
        var element_position = $("#projecten-in-beeld").offset().top;
        $(window).on("scroll", function () {
             if (!isExecuted) {
                 // Your code
                 isExecuted = true;
             }
        }
    }
</script>

【讨论】:

  • 感谢您的回复。计数器不应在文档准备好时开始。当有人向下滚动到 div“#projecten-in-beeld”时,它们应该开始。从那时起,计数器应该开始运行。使用当前代码,他们可以。仅当再次滚动使用分隔符功能的计数器时:“commaSeparateNumber”。从零重新开始。所有其他运行良好,但一个重新开始,我知道它与此功能有关:“commaSeparateNumber”但我怎样才能阻止它在一次之后而不是每次滚动时停止运行?
  • 你可以用一个布尔标志做一些简单的事情。您在文档准备好时将其预设为假“isExecuted = false”,然后当您的代码以滚动方式运行时,您将其设置为 true 并在运行代码之前检查是否 !isExecuted。我在答案中添加了一个示例,请检查。
  • 非常感谢!这正是我需要的推动力!成功了!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-09-01
  • 2021-04-12
  • 1970-01-01
  • 2010-09-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多