JS - 如何为我的代码删除 setTimeOut

Question

我正在尝试使用垂直滚动来显示对象 A。思路是，如果我的滚动高度大于scrollHeight(15)，那么在1.2秒之后、A会出现。然后当我滚动回到顶部时，A 将隐藏。

现在的问题是，如果我不使用 clearTimeout，setTimeout 将忽略条件：if ( scroll >= scrollHeight )

当我使用 clearTimeout 时，它似乎只在我快速滚动时才起作用，或者它根本不起作用。

这是我的代码。

var scrollHeight = 15;

$(window).scroll(function() {
    var scroll = getCurrentScroll();
    var delayThis;

    if ( scroll >= scrollHeight ) {
        delayThis = setTimeout(function(){

        //Display **A**... 

        }, 1200);

       }
       else{
        // Hide **A** ...
        clearTimeout(delayThis);
        }
  }

非常感谢您的帮助！！

Answer 1

你需要把delayThis放在事件之外，加上scrollHeight。因为否则它不再存在。现在你拥有它，它只是那个滚动事件的本地......而不是正在进行的事件。

另外...您将在滚动时一遍又一遍地设置超时。因此，在设置它之前，您可能需要确保 delayThis 尚未设置。

Answer 2

你必须告诉脚本消息是否已经显示，这样你就可以避免多次延迟。下面是我正在谈论的工作版本。希望对您有所帮助。

var scrollHeight = 15;
var message = $( ".message" ); 
var messagestatus = false;
var scrollposition;

$(window).scroll(function() { 
    scrollposition = $(document).scrollTop();
    
    if ( scrollposition >= scrollHeight ) {
        if ( messagestatus == false ) {
            setTimeout(function(){

                message.show();
                messagestatus = true;
                
            }, 1200);
        }

    } else{
        message.hide();
        messagestatus = false;
    } 
});

.message {
    display: none;
    position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>top</p>
<div class="message">
    Show!
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br />
<p>bottom</p>

JS - 如何为我的代码删除 setTimeOut

JS - how to remove setTimeOut for my code

javascript

jquery

settimeout

cleartimeout