使用jQuery实时更新Div内容：滚动显示true，1秒后切换为false

嗨，作为网页设计新手，你这个需求很清晰，不过现有代码存在两个小问题，我来帮你修正并解释清楚～

原代码的问题 #

• 定时器堆积：每次滚动页面都会触发scroll事件，创建新的setTimeout，但之前的定时器没有被清除，会导致多个定时器同时运行，造成显示混乱（比如还没到1秒就变成false，或者延迟时间不准）
• DOM未同步更新：定时器里只修改了hasScroll变量，但没有更新页面上的#rectangle内容，所以变量变了页面也不会跟着变

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        body { 
            height: 800px; 
            /* 加个背景渐变，方便看到滚动效果 */
            background: linear-gradient(#f0f0f0, #e0e0e0);
        }
        #rectangle {
            border: 2px solid #2c3e50;
            padding: 15px 20px;
            position: fixed; /* 固定在页面左上角，滚动时始终可见 */
            top: 20px;
            left: 20px;
            background-color: white;
            border-radius: 4px;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="rectangle"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var hasScroll = false;
        var scrollTimer; // 存储定时器ID，用于清除旧定时器

        $(document).ready(function() {
            $(window).scroll(function() {
                // 清除之前的定时器，避免多个定时器堆积
                clearTimeout(scrollTimer);
                
                hasScroll = true;
                $("#rectangle").html(hasScroll.toString());

                // 设置新的定时器，1秒后切换为false并同步更新页面
                scrollTimer = setTimeout(function() {
                    hasScroll = false;
                    $("#rectangle").html(hasScroll.toString());
                }, 1000);
            });
        });
    </script>
</body>
</html>

关键改进点 #

• 新增scrollTimer变量：每次滚动时先清除之前的定时器，确保只有最新的定时器生效，避免时间混乱
• 同步更新DOM：在定时器回调里也调用$("#rectangle").html()，保证页面显示和变量状态一致
• 优化样式：给矩形加了边框、背景和固定定位，滚动时更容易观察效果，同时给body加了渐变背景，方便测试滚动

现在你可以试试这段代码，滚动页面时会立刻显示true，停止滚动1秒后就会自动变成false啦～

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