使用jQuery实现滚动时增加计数器数值的方案咨询

嘿，这个滚动加分的需求很直观，我来帮你搞定它！首先咱们得先明确几个关键点：要有一个显示分数的页面元素、控制滚动事件的触发频率（不然滚动一下分数会跳得飞快）、还有分数的更新逻辑。

首先，你需要在页面上添加一个用来显示分数的元素，让用户能随时看到分数变化：

<!-- 固定在页面右上角，方便查看 -->
<div id="score" style="position: fixed; top: 20px; right: 20px; font-size: 24px; font-weight: bold; background: #fff; padding: 8px 12px; border-radius: 4px;">0</div>

接下来修改你的jQuery代码，核心是控制滚动事件的触发频率（因为scroll事件会在滚动过程中频繁触发，直接加分的话分数会涨得离谱），同时维护当前分数的状态：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
jQuery(function() {
    // 初始化当前分数
    let currentScore = 0;
    // 节流计时器，用来控制加分频率
    let throttleTimer = null;
    // 记录上一次滚动位置（可选，用来判断滚动方向）
    let lastScrollTop = 0;

    jQuery(window).scroll(function(){
        const currentScrollTop = jQuery(this).scrollTop();

        // 节流逻辑：每100ms只处理一次加分请求
        if (!throttleTimer) {
            throttleTimer = setTimeout(function() {
                // 可选：只在向下滚动时加分
                if (currentScrollTop > lastScrollTop) {
                    currentScore += 1; // 每次加1分，你可以改成任意数值
                    jQuery('#score').text(currentScore); // 更新页面显示
                }

                // 更新上一次滚动位置
                lastScrollTop = currentScrollTop;
                // 重置计时器，允许下一次触发
                throttleTimer = null;
            }, 100);
        }

        // 保留你原来的滚动超过2000px的逻辑，比如这里可以设置加分加倍
        if(currentScrollTop > 2000) {
            // 示例：超过2000px后，每次额外加1分
            // currentScore += 1;
            // jQuery('#score').text(currentScore);
        }
    });
});
</script>

关键细节说明： #

• 节流处理：用setTimeout做节流是为了避免滚动时分数疯狂上涨，你可以调整100这个数值（单位毫秒），数值越小加分越频繁，反之则越平缓。
• 滚动方向判断：如果不需要区分上下滚动，直接去掉if (currentScrollTop > lastScrollTop)的判断，每次节流触发时直接加分即可。
• 分数状态维护：用变量currentScore存储分数比直接从DOM读取更高效，也避免了DOM读取可能带来的错误。
• 关于jQuery版本：你用的1.4.3版本非常老旧了，建议尽量升级到3.x版本（兼容性更好，性能也更强），如果因为历史原因不能升级，上面的代码也能正常运行，因为用的都是jQuery基础API。

内容的提问来源于stack exchange，提问作者abukotsh