Почему так происходит?

Question

[yankoyski]

Есть код, который определяет, скроллится страница вверх или вниз:

var tempScrollTop, currentScrollTop = 0;
$(window).scroll(function(){
    currentScrollTop = findsTheWindowScrollTop();
    if (tempScrollTop < currentScrollTop ){
        alert("Вниз");
    }
    else if (tempScrollTop > currentScrollTop ) {
        alert("Вверх");
    }
    tempScrollTop = currentScrollTop;
});

Я новичок и у меня возникает несколько вопросов:
1. Почему при написании var перед строкой tempScrollTop = currentScrollTop; код перестаёт работать?
2. Почему при написании строки tempScrollTop = currentScrollTop не в конце, а после строки $(window).scroll(function(){ автоматически срабатывает alert("Вниз")
3. Почему, если строку var tempScrollTop, currentScrollTop = 0; заменить на строки: var tempScrollTop = 0; var currentScrollTop = 0; автоматически срабатывает alert("Вниз")?
4. Почему, если изменить else if на else код перестаёт работать?

Заранее благодарю.

Answer 1

[Евгений Калибров]

1. var - задаёт область видимости переменной, если вы перед строкой tempScrollTop = currentScrollTop; укажите var, то при следующем вызове функции в переменной не сохраняется предыдущего значения.

2. Потому что tempScrollTop нужно запоминать в конце, что бы при следующем вызове функции по событию сравнивать с предыдущим значением, а не с текущим.

3. Во втором варианте переменная инициализируется значением равным 0

Comments

[yankoyski]

Спасибо большое. Кое что остаётся всё равно мне непонятным:
2. Откуда при первом сравнении if (tempScrollTop < currentScrollTop ){ берётся значение tempScrollTop, если оно определяется в конце кода, а до этого оно равно 0 и определенно через строку var tempScrollTop, currentScrollTop = 0;?

[Евгений Калибров]

yankoyski,
Значение tempScrollTop при первом проходе = undefined

При сравнении undefined с любым числом получим false, поэтому первый раз в сравнении if (tempScrollTop < currentScrollTop ) у вас будет false