clearInterval функция не на самом деле очистка

Question

div завершает один раунд слева направо и справа налево, но застревает в функции scrollBack(). Программа выполняет оператор clearInterval() на нужном событии, но на самом деле он не очищает интервал. Что я делаю не так?

var backint = null; 

function scrollForward() { 
    if ($("#foo").scrollLeft() != $("#foo").width()) { 
    $("#foo").scrollLeft($("#foo").scrollLeft() + 1); 
    } else { 
    backint = setInterval(scrollBack, 5); 
    } 
} 

function scrollBack() { 
    if ($("#foo").scrollLeft() != 0) { 
    $("#foo").scrollLeft($("#foo").scrollLeft() - 1); 
    } else if ($("#foo").scrollLeft() == 0) { 
    clearInterval(backint); 
    } 
} 

Answer 1

Это лучше делать с .animate(), как Rory McCrossan предложил, потому что setInterval переопределяет существующая вещь и не обязательно лучше:

var foo = $("#container"), 
 
    bar = $("#foo"), 
 
    scrollSize = bar.width() - foo.width();; 
 

 
function scrollForward() { 
 
    console.log('forward', foo.scrollLeft(), bar.width() - foo.width()); 
 
    if (foo.scrollLeft() != scrollSize) { 
 
    foo.animate({ 
 
     scrollLeft: scrollSize + 'px' 
 
    }); 
 
    } 
 
} 
 

 
function scrollBack() { 
 
    console.log('back', foo.scrollLeft(), scrollSize); 
 
    if (foo.scrollLeft() === scrollSize) { 
 
    foo.animate({ 
 
     scrollLeft: '0px' 
 
    }); 
 
    } 
 
} 
 

 
foo.on("click", scrollForward); 
 
foo.on("dblclick", scrollBack);

#container { 
 
    border: 1px solid #ccc; 
 
    width: 410px; 
 
    overflow-x: scroll; 
 
    height: 50px; 
 
} 
 
#foo { 
 
    background-color: #ccc; 
 
    width: 1300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="foo">Click to scroll right. Double-click to scroll left.</div> 
 
</div>