Javascript如何停止setTimeOut

Question

您好，我遇到了一個小問題，我不知道如何在我的添加功能到達網絡上的某些Y位置時停止我的添加功能，某些機構可以幫助我嗎！

 var scroll = function(){ var positionYTop = 0, speed = 50, links = document.getElementsByTagName('a'); function timer() { var clock = setTimeout(add, 200) } function add() { window.scrollTo(0, positionYTop += speed); timer(); } add(); } 

Answer 1

尚不清楚您要使用特定的代碼做什么，但是停止計時器的一般答案是將setTimeout()的結果保存到范圍足夠大或變量的屬性中對象，您以后可以訪問它，然后使用它來調用clearTimeout() 。 那將停止計時器。

在您當前的代碼中，可變clock僅在timer()函數中是本地的，因此一旦該函數完成，它將超出范圍且不可訪問。 您可能需要將clock變量移到更高的范圍，在該范圍內可以從您要停止計時器的任何代碼中訪問它。

---

或者，如果你問的問題是，如何告訴你add()函數停止發放新的timer()調用時，它已經達到了一定的位置，那么你可以只添加一個if()語句你add()函數，如果滿足某些條件，則不要再次調用timer() 。

例如：

function add() {
    window.scrollTo(0, positionYTop += speed);
    if (window.scrollTop < 400) {
        timer();
    }
}

Answer 2

一種常見的方法是通過預先設置滾動開始，並在另一個方向上進行transform / translateY以抵消滾動的效果，然后將變換向下轉換為零。

基本上，在這個時代，我們希望瀏覽器/ CSS進行過渡。 它的代碼更少，使用transform會更加流暢。

這是一個非常粗糙的想法（未經測試，您需要使用它）：

body.start {
  transform: translateY(-400px);
}

body.transitioned {
  transform: translateY(0);
  transition: transform 1s;
}

function scroll() {
  document.body.scrollTop; = 400;
  document.body.classList.add('start');
  setTimeout(function() { document.body.classList.add('transitioned'); }, 100);
}