如何将 javascript 从运行延迟到浏览器视图内？

Question

我正在寻找运行一个在浏览器视图中运行的计数脚本，就像它在 chicagolawyer.com 的视频播放器模块上所做的那样。据我所知，他们使用 jquery.appear.js (Link) and I have found a count up script (link) 完成此操作，我已经能够在我正在设计的网站上工作，但无法确定如何实现浏览器查看延迟脚本。这是我在 Joomla 模块中输入的代码：

<h1 id="casesWon"></h1>
<script type="text/javascript">
var options = {
    useEasing : true,
    useGrouping : true,
    separator : ',',
    decimal : '.',
    prefix : '',
    suffix : '% Cases Won'
};
var count1 = new CountUp("casesWon", 0, 98, 0, 10, options);
$('casesWon').on('appear', count1.start());
</script>

如果我将最后一行切换为 count1.start();，此代码将立即运行；所以我只是想弄清楚我在 jquery.appear.js 上做错了什么。我是 Javascript 的新手，所以我确信我缺少的是一些简单的东西。为 jquery 脚本提供的文档似乎含糊不清，但对于比我更了解 jquery 的人来说可能已经足够了。请帮忙。

Answer 1

确保您正在使用

$('#casesWon').on('appear', count1.start());

而不是

$('casesWon').on('appear', count1.start());

也许只是这里的错字，也许是代码上的错字！ ;)

编辑：另外，您可能需要像这样使用它：

$('#casesWon').on('appear', count1.start);

防止加载时执行

Answer 2

经过大量阅读和实验，我终于找到了让这两个脚本协同工作的方法。不是将直接代码输入模块，而是创建了第三个脚本。脚本如下：

jQuery(function($) {
    var $casesWon = $('#casesWon');

    var optionsCases = {
        useEasing : true,
        useGrouping : true,
        separator : ',',
        decimal : '.',
        prefix : '',
        suffix : '% Cases Won'
    };

    var countCases = new CountUp("casesWon", 0, 98, 0, 10, optionsCases);

    $('#casesWon').appear();

    $(document.body).on('appear', function(e, $affected) {
        // this code is executed for each appeared element

        console.log( $affected );
        $affected.each(function() {         
            countCases.start();
        });
    });

});

当我这样做时，计数脚本会一直等到 id 为 "casesWon" 的元素出现在浏览器视图中，然后开始计数。感谢@monxas 和@KevinB 试图提供帮助。投票否决这个问题的人可能会搞砸，因为在我自己研究其他网站如何做到这一点之前，我在 Whosebug 上寻找了这个问题的答案。希望这会对其他人有所帮助。

如何将 javascript 从运行延迟到浏览器视图内？

How do I delay javascript from running until inside the browser's view?

javascript

jquery

web-applications

joomla3.0

如何将 javascript 从 运行 延迟到浏览器视图内？

How do I delay javascript from running until inside the browser's view?

javascript

jquery

web-applications

joomla3.0

如何将 javascript 从运行延迟到浏览器视图内？