Автоматично превъртане с setInterval/clearInterval

Аз съм сравнително нов в JS кодирането и не мога да накарам това малко число да работи. Може ли някой да ми каже какво правя грешно?

Моят JavaScript е:

    incrementScroll = function() {
        window.scrollBy(0, 3) ;
    }

    startScrollLoop = function() {
        scrollLoopId = setInterval( "incrementScroll", 5) ; 
    }

    stopScrollLoop = function() {
        clearInterval( scrollLoopId ) ;
    }

И моят HTML е:

<button onclick="startScrollLoop()">AUTO SCROLL</button>
<button onclick="stopScrollLoop ()">STOP SCROLL</button>

Отново много благодаря за помощта. Нов във всичко това и трябва да накарам проекта да работи до сутринта. наздраве


person Johnny Venom    schedule 11.12.2012    source източник
comment
Това може да не реши проблема ви, но не трябва да задавате интервал, който използва по-малко интервално време от периода на един кадър (fps на браузъра), който е около 16 милисекунди (ако работи с нормална скорост): setInterval( incrementScroll, 20 );   -  person Mathias    schedule 11.12.2012


Отговори (1)


Първият аргумент на setInterval() трябва да бъде препратка към функция или не в идеалния случай низ, който да бъде eval()'d, което би било пълно извикване на функция с (). Така че премахнете кавичките:

// Pass the reference to incrementScroll, 
// not a quoted string containing its name.
scrollLoopId = setInterval(incrementScroll, 5); 

И за да изчистите превъртането, ще трябва да дефинирате scrollLoopId в по-висок обхват с var.

// Define outside the function so it is available
// in scope of the stopScrollLoop() function when needed...
var scrollLoopId;
var startScrollLoop = function() {
    scrollLoopId = setInterval( incrementScroll, 5) ; 
}

Демо на Jsfiddle

(използва по-бавна скорост на превъртане, за да ви даде възможност да щракнете върху бутона за спиране в средата на текста)

Имайте предвид, че е добра практика да използвате ключовата дума var с всяко от тях. въпреки че така или иначе биха се озовали в window обхват (ако приемем, че не са дефинирани в друга функция).

// Define with var
var incrementScroll = function() {
  window.scrollBy(0, 3);
}
person Michael Berkowski    schedule 11.12.2012
comment
Еврика! Работи чудесно. Много благодаря. Интернет наистина може да ви свърши домашното вместо вас! Сайтът (все още е в процес на разработка) е тук: johnnyvenom.org. - person Johnny Venom; 11.12.2012