setInterval() not repeating. Works only 1 time

Question

I'm trying to have a div's left property change by its self - one every second when your hovering over so I made this:

$("div.scroll_left").hover(function(){
    var left_num = $('div.license_video').css("left")
    var left_num1 = parseInt(left_num, 10) - 1;
    var timerID = setInterval(alert(left_num1), 1000);
    //var timerID = setInterval(slideleft(left_num1), 1000);
},function(){
    clearInterval(timerID);
});
//function slideleft(left_num){
    //$('.license_video').css('left', left_num + "%");
//}

In theory you would think it repeat till you move your cursor off which clears the interval. When I hover over it does it one time and never repeats (there are no errors). Then when I hover off it gives a error "Uncaught ReferenceError: timerID is not defined"

Answer 1

setInterval isn't working at all. You aren't passing it a function as the first argument.

You are calling alert immediately and trying to use it's return value as the function to repeat.

var timerID = setInterval(function () { alert(left_num1) }, 1000);

Answer 2

So you've got two different problems here:

// (1) timerID needs to be defined in a scope accessible to both hover callbacks
var timerID = null;

$("div.scroll_left").hover(function(){
    var left_num = $('div.license_video').css("left")
    var left_num1 = parseInt(left_num, 10) - 1;

    // (2) Pass a *function* to setInterval
    timerID = setInterval(function () {
        alert(left_num1)
    }, 1000);
}, function(){
    clearInterval(timerID);
    timerID = null;
});

When you write

setInterval(alert(left_num1), 1000);
// or
setInterval(slideleft(left_num1), 1000);

you are passing the value returned by calling alert() or slideleft() (respectively) to setInterval. You are not passing the function itself.