setTimeout函数 导致交替使用参数

我分别给三个object定制click事件（函数相同，传的参数不同:Start(param)）click事件是一对象的一函数，执行完整个过程要一定的时间（因为用了setTimeout函数）。现在问题是这样的：当这个setTimeout还没结结束的时候去触发另一个click事件，会出现两个参数交替失用。
比如两索引 第一个参数index = 1;第二个 参数index =  2，那么第一次setTimeout用的是index = 1 ，第二次setTimeout用的是index = 2。  怎么样让它“忘掉”第一次的参数而一直使用第二次的参数。完整代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<style type="text/css">
#container
{
width:300px;
height:50px;
border:1px #666666 solid;
position:relative;
overflow:hidden;
padding-top:15px;
}
#moveobj
{
width:1200px;
height:10px;
background-color:#666666;
position:absolute;
}
ul{margin:0;padding:0}
</style>
<script type="text/javascript">
var $ = function(id)
{
return "string" == typeof id ? document.getElementById(id) : id;
};
function New(aClass, aParams)  //通用创建函数
{
function new_()
{
aClass.Create.apply(this, aParams);
};
new_.prototype = aClass;
return new new_();    //返回建立最终建立的对象 
};
extend = function(destination, source) 
{
for (var property in source) 
{
destination[property] = source[property];
};
return destination;
};
var MoveClass =
{   //容器，滑动体，参数，滑动体分块总合
Create : function(container,slider,parameter,count,options)
{
if(parameter <= 0 || count <= 0) return;
var oContainer = $(container),oSlider=$(slider),oThis = this;
this.index = 0;      //初始位置
this._timer = null;
this.OContainer = oContainer;
this.OSlider = oSlider;
this._count = count || 0;
this._target = 0;
this._parameter=parameter; this.setOptions(options); this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Onstart = this.options.Onstart;
this.onFinish = this.options.onFinish;
},
setOptions : function(options)
{
this.options = 
{
Step :  5,
Time : 10 ,
Onstart : function(){},
onFinish: function(){}
};
extend(this.options , options || {})
},
//根据参数定目标值
Start : function()
{
if(this.index >= this._count)
{
this.index = 0 ;
}
this._target = -1 * this._parameter * this.index;
this.Onstart();
this.Move();
},
//减速移动到目标值(进行时值)
Move : function()
{
var oThis = this, iNow = parseInt(this.OSlider.style.left) || 0, iStep = this.GetStep(this._target, iNow);
//步长非0重复移动
if (iStep != 0)
{
this.OSlider.style.left = (iNow + iStep) + "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
}
else 
{
this.OSlider.style["left"] = this._target + "px";
this.onFinish();
}
},
//设置速度变化步长。
GetStep: function(iTarget, iNow) 
{
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
$("text").innerHTML = iStep+"__"+$("text").innerHTML;
$("text3").innerHTML = this.index+"="+$("text3").innerHTML;
return iStep;
}
};
move = function(index)
{
var objmove = New(MoveClass,["container","moveobj",300,4,{}]);
objmove.index = index;
objmove.Start();
}
</script>
 </HEAD> <BODY>
<div id="container">
<ul id="moveobj">
<li style="background-color:red;width:300px;float:left">a</li>
<li style="background-color:#d3d9f8;width:300px;float:left">b</li>
<li style="background-color:#efd9b8;width:300px;float:left">c</li>
<li style="background-color:#eaa9b8;width:300px;float:left">d</li>
</ul>

</div>
<ul id="bt" style="width:50px;">
<li onclick="move(0)" style="background-color:#d3d9f8">a</li>
<li onclick="move(1)" style="background-color:#efd9b8">b</li>
<li onclick="move(2)" style="background-color:#d3d9f8">c</li>
<li onclick="move(3)" style="background-color:#efd9b8">d</li>
</ul>
<div id="text"></div>
<div id="text2"></div>
<div id="text3"></div>
 </BODY>
</HTML>

解决方案 »

  1.   

    每次setTimeout之前，先用clearTimeout取消上一次的定时。
      

  2.   

    if (iStep != 0)
    {
    this.OSlider.style.left = (iNow + iStep) + "px";
    if (this_timer!=null){
      clearTimeout(this._timer);
    }
    this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
    } 
      

  3.   

    回二楼， 问题还是没解决。  我加过clearTimeout 解决不了
      

  4.   

    clearTimeout应该能解决，你看看你clear的那个函数的作用域，可能你函数名字写对了，但是作用域不对，就算你写了clear，还是没用的。
      

  5.   

    创建不同的 time对象，clearTimeout自己的。逻辑上好好看看。
      

  6.   

    这代码怎么html 的贴上来没有啊。！！再贴次：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
    <style type="text/css">
    #container
    {
    width:300px;
    height:50px;
    border:1px #666666 solid;
    position:relative;
    overflow:hidden;
    padding-top:15px;
    }
    #moveobj
    {
    width:1200px;
    height:10px;
    background-color:#666666;
    position:absolute;
    }
    ul{margin:0;padding:0}
    </style>
    <script type="text/javascript">
    var $ = function(id)
    {
    return "string" == typeof id ? document.getElementById(id) : id;
    };
    function New(aClass, aParams)  //通用创建函数
    {
    function new_()
    {
    aClass.Create.apply(this, aParams);
    };
    new_.prototype = aClass;
    return new new_();    //返回建立最终建立的对象 
    };
    extend = function(destination, source) 
    {
    for (var property in source) 
    {
    destination[property] = source[property];
    };
    return destination;
    };
    var MoveClass =
    {   //容器，滑动体，参数，滑动体分块总合
    Create : function(container,slider,parameter,count,options)
    {
    if(parameter <= 0 || count <= 0) return;
    var oContainer = $(container),oSlider=$(slider),oThis = this;
    this.index = 0;      //初始位置
    this._timer = null;
    this.OContainer = oContainer;
    this.OSlider = oSlider;
    this._count = count || 0;
    this._target = 0;
    this._parameter=parameter; this.setOptions(options); this.Step = Math.abs(this.options.Step);
    this.Time = Math.abs(this.options.Time);
    this.Onstart = this.options.Onstart;
    this.onFinish = this.options.onFinish;
    },
    setOptions : function(options)
    {
    this.options = 
    {
    Step :  5,
    Time : 10 ,
    Onstart : function(){},
    onFinish: function(){}
    };
    extend(this.options , options || {})
    },
    //根据参数定目标值
    Start : function()
    {
    if(this.index >= this._count)
    {
    this.index = 0 ;
    }
    this._target = -1 * this._parameter * this.index;
    this.Onstart();
    this.Move();
    },
    //减速移动到目标值(进行时值)
    Move : function()
    {
    var oThis = this, iNow = parseInt(this.OSlider.style.left) || 0, iStep = this.GetStep(this._target, iNow);
    //步长非0重复移动
    if (iStep != 0)
    {
    this.OSlider.style.left = (iNow + iStep) + "px";
    if (this._timer!=null)
    { 
      clearTimeout(this._timer); 
    } 
    this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
    }
    else 
    {
    this.OSlider.style["left"] = this._target + "px";
    this.onFinish();
    }
    },
    //设置速度变化步长。
    GetStep: function(iTarget, iNow) 
    {
    var iStep = (iTarget - iNow) / this.Step;
    if (iStep == 0) return 0;
    if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
    $("text").innerHTML = iStep+"__"+$("text").innerHTML;
    $("text3").innerHTML = this.index+"="+$("text3").innerHTML;
    return iStep;
    }
    };
    move = function(index)
    {
    var objmove = New(MoveClass,["container","moveobj",300,4,{}]);
    objmove.index = index;
    objmove.Start();
    }
    </script>
     </HEAD> <BODY>
    <div id="container">
    <ul id="moveobj">
    <li style="background-color:red;width:300px;float:left">a</li>
    <li style="background-color:#d3d9f8;width:300px;float:left">b</li>
    <li style="background-color:#efd9b8;width:300px;float:left">c</li>
    <li style="background-color:#eaa9b8;width:300px;float:left">d</li>
    </ul>

    </div>
    <ul id="bt" style="width:50px;">
    <li onclick="move(0)" style="background-color:#d3d9f8">a</li>
    <li onclick="move(1)" style="background-color:#efd9b8">b</li>
    <li onclick="move(2)" style="background-color:#d3d9f8">c</li>
    <li onclick="move(3)" style="background-color:#efd9b8">d</li>
    </ul>
    <div id="text"></div>
    <div id="text2"></div>
    <div id="text3"></div>
     </BODY>
    </HTML>
      

  7.   

    clearTimeout(this._timer); 
    在这里用不上啊, 这里是this.index感觉有两个值在起作用!!!!
      

  8.   

    你的clearTimeout没有获得句柄：
    把你的clearTimeout改成下面的一句：
    clearTimeout(setTimeout("0")-1); 即可以自动获得上一个setTimeout的句柄，你问题即可解决
      

  9.   

    你的clearTimeout没有获得句柄：
    把你的clearTimeout改成下面的一句：
    clearTimeout(setTimeout("0")-1); 即可以自动获得上一个setTimeout的句柄，你问题即可解决
      

  10.   

    可以做一个池
    类似:var _thread = [];_thread.push(setTimeout(function(){/*方法1*/}, 1000));
    _thread.push(setTimeout(function(){/*方法2*/}, 1000));
    _thread.push(setTimeout(function(){/*方法3*/}, 1000));for(var i=0; i<thread.length; i++)
        clearTimeout(_thread[i]);这只是获取句柄的另一种方式.
    总之使用setTimeout来实现缓动动画或者其他什么东西的时候,不用句柄来明确对应的"线程"是很"危险"的.
      

  11.   

    move函数调用的时候每次生成新objmove对象。
    这样的话,通过this._timeout访问的并不是上次保存的Timeout句柄。
    clearTimeout当然也就无效了。
    修改的方法如下:
    方案一: 页面保持唯一的objmove对象。
    修改部分代码如下:var objmove;
    move = function(index){
        if (!objmove) 
            objmove = New(MoveClass, ["container", "moveobj", 300, 4, {}]);
        objmove.index = index;
        objmove.Start();
    }
    安案二: 将timeout句柄保存到全局变量中。
    修改后的javascript代码
             var _timer = null;
                var $ = function(id){
                    return "string" == typeof id ? document.getElementById(id) : id;
                };
                function New(aClass, aParams)//通用创建函数 
                {
                    function new_(){
                        aClass.Create.apply(this, aParams);
                    };
                    new_.prototype = aClass;
                    return new new_();
                    //返回建立最终建立的对象 
                };
                extend = function(destination, source){
                    for (var property in source) {
                        destination[property] = source[property];
                    };
                    return destination;
                };
                var MoveClass = {
                    //容器，滑动体，参数，滑动体分块总合 
                    Create: function(container, slider, parameter, count, options){
                        if (parameter <= 0 || count <= 0) 
                            return;
                        var oContainer = $(container), oSlider = $(slider), oThis = this;
                        this.index = 0;
                        //初始位置 
                        this.OContainer = oContainer;
                        this.OSlider = oSlider;
                        this._count = count || 0;
                        this._target = 0;
                        this._parameter = parameter;
                        this.setOptions(options);
                        this.Step = Math.abs(this.options.Step);
                        this.Time = Math.abs(this.options.Time);
                        this.Onstart = this.options.Onstart;
                        this.onFinish = this.options.onFinish;
                    },
                    setOptions: function(options){
                        this.options = {
                            Step: 5,
                            Time: 10,
                            Onstart: function(){
                            },
                            onFinish: function(){
                            }
                        };
                        extend(this.options, options ||
                        {})
                    },
                    //根据参数定目标值 
                    Start: function(){
                        if (this.index >= this._count) {
                            this.index = 0;
                        }
                        this._target = -1 * this._parameter * this.index;
                        this.Onstart();
                        this.Move();
                    },
                    //减速移动到目标值(进行时值) 
                    Move: function(){
                        var oThis = this;
                        var iNow = parseInt(this.OSlider.style.left) || 0;
                        var iStep = this.GetStep(this._target, iNow);
                        
                        //步长非0重复移动 
                        if (iStep != 0) {
                            this.OSlider.style.left = (iNow + iStep) + "px";
                            if (_timer != null) {
                                clearTimeout(_timer);
                            }
                            _timer = setTimeout(function(){
                                oThis.Move();
                            }, this.Time);
                        }
                        else {
                            this.OSlider.style["left"] = this._target + "px";
                            this.onFinish();
                        }
                    },
                    //设置速度变化步长。 
                    GetStep: function(iTarget, iNow){
                        var iStep = (iTarget - iNow) / this.Step;
                        if (iStep == 0) 
                            return 0;
                        if (Math.abs(iStep) < 1) 
                            return (iStep > 0 ? 1 : -1);
                        $("text").innerHTML = iStep + "__" + $("text").innerHTML;
                        $("text3").innerHTML = this.index + "=" + $("text3").innerHTML;
                        return iStep;
                    }
                };
                move = function(index){
                    var objmove = New(MoveClass, ["container", "moveobj", 300, 4, {}]);
                    objmove.index = index;
                    objmove.Start();
                }