js中this和that

在tab选项卡中做一个延迟加载时，this和that的问题。

window.onload=function(){
var index=0;
var timer=null;

var lis=$('notice-tit').getElementsByTagName('li'),
    divs=$('notice-con').getElementsByTagName('div');
for(var i=0;i<lis.length;i++){
lis[i].id=i;
lis[i].onmouseover=function(){
var that=this;
//如果存在准备执行的计时器，立刻清除
if(timer){
clearTimeout(timer);
timer=null;
}
timer=setTimeout(function(){
  for(var j=0;j<lis.length;j++){
lis[j].className='';
divs[j].style.display='none';
}
lis[that.id].className='select';
divs[that.id].style.display='block';
 },500)
 }
 }
}

不加第二个红色代码行时，当然后面的that换成this，出现报错：Uncaught TypeError: Cannot set property 'className' of undefined。

查过之后错误可能有两种：一是li标签没有加上id；二是this指的对象不对。

在我的代码中错误是第二种，this指代的对象不对，在setTimeout里面的this指的是window，而不再是li标签了。

因为setInterval和setTimeout属于window的方法，window为它们的对象。

但是在setTimeout外面this仍然指li标签，故用that变量来引用当时滑过的li标签。