关于setInterval的疑惑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
/*body { margin:0; padding:0; }
ul,li { margin:0; padding:0; }
ul li { float:left; width:100px; }
ul { list-style:none; float:left; width:300px; }
#box { width:300px; overflow:hidden; position:relative; background:#f00; height:100px; }
#boxframe { width:600px; position:absolute; top:0; }*/
body { margin:0; padding:0; }
ul,li { margin:0; padding:0; }
ul li { float:left; width:100px; }
ul { list-style:none; float:left; width:300px; }
#box { width:300px; overflow:hidden; position:relative; background:#f00; height:100px; }
#boxframe { width:600px; position:absolute; top:0; }
</style>
<script type="text/javascript">
(function( $, undefined ) {
$.fn.extend({
scrolls: function() {

function scrollss() {
if(parseInt($('#boxframe').css('left')) == -300) { 
$('#boxframe').css('left', 0)
}
   $('#boxframe').animate({left: '-=100px'}, 500);
}

var timer;

$('ul').clone().appendTo('#boxframe');
timer = setInterval(scrollss, 2000);   
$('#boxframe').hover(function() {
clearInterval(timer);                         
}, function() {
timer = setInterval(scrollss, 2000);   
});
}
});   
}(jQuery));
</script>
<script type="text/javascript">
$(function() {
$('#box').scrolls();    
});
</script>
</head><body>
<div id="box">
    <div id="boxframe">
        <ul>
            <li><a href="#" target="_blank"><img src="1.jpg" width="100" height="100" /></a></li>
            <li><a href="#" target="_blank"><img src="2.gif" width="100" height="100" /></a></li>
            <li><a href="#" target="_blank"><img src="3.gif" width="100" height="100" /></a></li>
        </ul>
          
    </div>
</div>
</body>
</html>代码中timer = setInterval(scrollss, 2000);   的setInterval的第一个参数写scrollss可以，写"scrollss()"为什么不行呢
可是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
body { margin:0; padding:0; }
ul,li { margin:0; padding:0; }
ul li { float:left; width:100px; }
ul { list-style:none; float:left; width:300px; }
#box { width:300px; overflow:hidden; position:relative; background:#f00; height:100px; }
#boxframe { width:600px; position:absolute; top:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function scrolls() {
    if(parseInt($('#boxframe').css('left')) == -300) { 
        $('#boxframe').css('left', 0)
    }
   $('#boxframe').animate({left: '-=100px'}, 500);
}
var timer;
$(function() {
    $('ul').clone().appendTo('#boxframe');
    timer = setInterval('scrolls()', 2000);   
    $('#boxframe').hover(function() {
        clearInterval(timer);                         
    }, function() {
        timer = setInterval('scrolls()', 2000);   
    });
});
alert(a);
</script>
</head>
<body>
<div id="box">
    <div id="boxframe">
        <ul>
            <li><a href="#" target="_blank"><img src="1.jpg" width="100" height="100" /></a></li>
            <li><a href="#" target="_blank"><img src="2.gif" width="100" height="100" /></a></li>
            <li><a href="#" target="_blank"><img src="3.gif" width="100" height="100" /></a></li>
        </ul>
          
    </div>
</div>
</body>
</html> 中为什么可以写"scrolls()"呢

解决方案 »

  1.   

    setInterval你把他当成window.setInterval就可以了。第一个参数传字符串的话，会去window下面找这个方法去执行。第一个参数是函数的话，就直接执行这个方法了。所以一般我都这么写：
    setInterval(function(){
         xxxx();
    },3000)
      

  2.   

    太感谢你了那么var timer;也就是定时器是作为个局部变量好还是作为全局变量好，作为局部变量不会出现错误吧，比如重新定义什么的？