Javascript, как остановить setTimeOut

Question

Hellow Я столкнулся с небольшой проблемой, я не знаю, как остановить мою функцию добавления, когда она достигнет некоторой позиции Y на моем веб-сайте, может ли кто-то помочь мне в этом?

var scroll = function(){ 
 
\t 
 
\t var positionYTop = 0, 
 

 
\t \t speed = 50, 
 
\t \t links = document.getElementsByTagName('a'); 
 

 
\t function timer() { 
 
\t \t var clock = setTimeout(add, 200) 
 
\t } 
 

 
\t function add() { 
 
\t \t window.scrollTo(0, positionYTop += speed); 
 
\t \t timer(); 
 
\t } 
 

 
\t add(); 
 
}

Answer 1

Общий подход к этому является, чтобы начать путем установки прокрутки вперед, наряду с преобразованием/translateY в другом направлении, чтобы компенсировать эффект прокрутки, то переход преобразование до нуля.

В принципе, в наши дни мы хотим, чтобы браузер/CSS выполнял переход. Это меньше кода, и с помощью преобразования он будет намного более плавным.

Вот очень грубая идея (не тестировалось, вам нужно будет играть с ним):

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); 
} 

Answer 2

Это не совсем ясно, что вы пытаетесь сделать с определенным кодом, но общий ответ для остановки таймера в том, что вы сохраните результат от setTimeout() в переменную, которая в достаточно большой области или на объекте объекта, к которому вы можете впоследствии получить доступ, а затем использовать его для вызова clearTimeout(). Это остановит таймер.

В вашем текущем коде переменная clock является локальной только для функции timer(), поэтому, как только эта функция закончится, она будет недоступна и недоступна. Вероятно, вам нужно переместить переменную clock в более высокую область, где она будет доступна из любого кода, из которого вы хотите остановить таймер.

---

Или, если вопрос вы спрашиваете о том, как сказать add() функцию, чтобы остановить выдачу новых timer() вызовов, когда он достиг определенного положения, то вы можете просто добавить if() заявление вашей add() функции и не вызывать timer(), если какое-либо условие выполнено.

Например:

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