通过 随机数+时间限制 设置html的值 为什么函数已经停止了 还是会再设置一次

本帖最后由 Cjlu_D 于 2011-01-13 00:04:01 编辑

解决方案 »

  1.   

    请各位不要在手动停止后setTimeout这个函数还在运行的问题上纠结
    先解决我问的问题再说
    当然能帮我在手动停止的时候清除这个setTimeout那当然是最好了
      

  2.   

    我没动你的代码
    测试没发现你说的情况<!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" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    var person = [
        {id:0,name:'测试0'},
        {id:1,name:'测试1'},
        {id:2,name:'测试2'},
        {id:3,name:'测试3'},
        {id:4,name:'测试4'},
        {id:5,name:'测试5'},
        {id:6,name:'测试6'},
        {id:7,name:'测试7'},
        {id:8,name:'测试8'},
        {id:9,name:'测试9'},
        {id:10,name:'测试10'},
        {id:11,name:'测试11'},
        {id:12,name:'测试12'},
        {id:13,name:'测试13'},
        {id:14,name:'测试14'},
        {id:15,name:'测试15'},
        {id:16,name:'测试16'},
        {id:17,name:'测试17'},
        {id:18,name:'测试18'},
        {id:19,name:'测试19'},
        {id:20,name:'测试20'},
        {id:21,name:'测试21'},
        {id:22,name:'测试22'},
        {id:23,name:'测试23'},
        {id:24,name:'测试24'},
        {id:25,name:'测试25'},
        {id:26,name:'测试26'},
        {id:27,name:'测试27'},
        {id:28,name:'测试28'},
        {id:29,name:'测试29'},
        {id:30,name:'测试30'},
        {id:31,name:'测试31'},
        {id:32,name:'测试32'},
        {id:33,name:'测试33'},
        {id:34,name:'测试34'},
        {id:35,name:'测试35'},
        {id:36,name:'测试36'},
        {id:37,name:'测试37'},
        {id:38,name:'测试38'},
        {id:39,name:'测试39'},
        {id:40,name:'测试40'},
        {id:41,name:'测试41'},
        {id:42,name:'测试42'},
        {id:43,name:'测试43'},
        {id:44,name:'测试44'},
        {id:45,name:'测试45'},
        {id:46,name:'测试46'},
        {id:47,name:'测试47'},
        {id:48,name:'测试48'},
        {id:49,name:'测试49'},
        {id:50,name:'测试50'},
        {id:51,name:'测试51'},
        {id:52,name:'测试52'},
        {id:53,name:'测试53'},
        {id:54,name:'测试54'},
        {id:55,name:'测试55'},
        {id:56,name:'测试56'},
        {id:57,name:'测试57'},
        {id:58,name:'测试58'},
        {id:59,name:'测试59'}
    ]Array.prototype.removeSplice = function(index){   
      var i = 0;
      for(i=0; i<this.length && this[i].id != index; i++);
      if(i > this.length)return false;
      this.splice(i,1);   
      return true;
    }
    var roundNO
    function mathround(){
        roundNO = Math.round(Math.random()*100)
        if(roundNO>person.length-1){
            mathround()
        }else{
            $('#run').html(person[roundNO].name)
            return roundNO
        }
    }
    var isrun = 0
    var gogogo
    function autoStop(){
        if(isrun==1){
            stoprun()
        }
    }
    function startrun(){
        if(isrun==0){
            gogogo = setInterval(mathround,1)
            isrun=1
            setTimeout(autoStop,1000)
        }
    }
    function stoprun(){
        clearInterval(gogogo)
        isrun = 0
        alert(roundNO)
    }
    </script>
    </head>
    <body>   <div id="run">
            
        </div>
        <div>
            <input type="button" onclick="startrun()" value="开始" />
            <input type="button" onclick="stoprun()" value="停止" />
        </div></body> 
      

  3.   

    真的   不去点停止 20秒后自动停止 然后弹出一个alert 在点掉alert的时候 div的html会发生变化
      

  4.   

    我把我的运行状态录像了 真的变了 你们可以看录像 http://www.rayfile.com/zh-cn/files/40f7807d-1eb9-11e0-abaf-0015c55db73d/
      

  5.   


     <div id="run">
            
        </div>
        <div>
            <input type="button" onclick="startrun()" value="开始" />
            <input type="button" onclick="stoprun()" value="停止" />
        </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    var person = [
        {id:0,name:'测试0'},
        {id:1,name:'测试1'},
        {id:2,name:'测试2'},
        {id:3,name:'测试3'},
        {id:4,name:'测试4'},
        {id:5,name:'测试5'},
        {id:6,name:'测试6'},
        {id:7,name:'测试7'},
        {id:8,name:'测试8'},
        {id:9,name:'测试9'},
        {id:10,name:'测试10'},
        {id:11,name:'测试11'},
        {id:12,name:'测试12'},
        {id:13,name:'测试13'},
        {id:14,name:'测试14'},
        {id:15,name:'测试15'},
        {id:16,name:'测试16'},
        {id:17,name:'测试17'},
        {id:18,name:'测试18'},
        {id:19,name:'测试19'},
        {id:20,name:'测试20'},
        {id:21,name:'测试21'},
        {id:22,name:'测试22'},
        {id:23,name:'测试23'},
        {id:24,name:'测试24'},
        {id:25,name:'测试25'},
        {id:26,name:'测试26'},
        {id:27,name:'测试27'},
        {id:28,name:'测试28'},
        {id:29,name:'测试29'},
        {id:30,name:'测试30'},
        {id:31,name:'测试31'},
        {id:32,name:'测试32'},
        {id:33,name:'测试33'},
        {id:34,name:'测试34'},
        {id:35,name:'测试35'},
        {id:36,name:'测试36'},
        {id:37,name:'测试37'},
        {id:38,name:'测试38'},
        {id:39,name:'测试39'},
        {id:40,name:'测试40'},
        {id:41,name:'测试41'},
        {id:42,name:'测试42'},
        {id:43,name:'测试43'},
        {id:44,name:'测试44'},
        {id:45,name:'测试45'},
        {id:46,name:'测试46'},
        {id:47,name:'测试47'},
        {id:48,name:'测试48'},
        {id:49,name:'测试49'},
        {id:50,name:'测试50'},
        {id:51,name:'测试51'},
        {id:52,name:'测试52'},
        {id:53,name:'测试53'},
        {id:54,name:'测试54'},
        {id:55,name:'测试55'},
        {id:56,name:'测试56'},
        {id:57,name:'测试57'},
        {id:58,name:'测试58'},
        {id:59,name:'测试59'}
        
    ]Array.prototype.removeSplice = function(index){   
      var i = 0;
      for(i=0; i<this.length && this[i].id != index; i++);
      if(i > this.length)return false;
      this.splice(i,1);   
      return true;
    }
    var roundNO
    function mathround(){
        roundNO = Math.round(Math.random()*100)
        if(roundNO>person.length-1){
            mathround()
        }else{
            $('#run').html(person[roundNO].name)
            return roundNO
        }
    }
    var isrun = 0
    var gogogo
    function autoStop(){
        if(isrun==1){
            stoprun()
        }
    }
    function startrun(){
        if(isrun==0){
            gogogo = setInterval(mathround,1)
            isrun=1
            setTimeout(autoStop,20000)
        }
    }
    function stoprun(){
       if(isrun==0){
        clearInterval(gogogo)
        isrun = 0
        alert("请先开始!");
       }else{
         alert(roundNO)
       }
    }
    </script>
      

  6.   


    <!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=GBK" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    var person = [
        {id:0,name:'测试0'},
        {id:1,name:'测试1'},
        {id:2,name:'测试2'},
        {id:3,name:'测试3'},
        {id:4,name:'测试4'},
        {id:5,name:'测试5'},
        {id:6,name:'测试6'},
        {id:7,name:'测试7'},
        {id:8,name:'测试8'},
        {id:9,name:'测试9'},
        {id:10,name:'测试10'},
        {id:11,name:'测试11'},
        {id:12,name:'测试12'},
        {id:13,name:'测试13'},
        {id:14,name:'测试14'},
        {id:15,name:'测试15'},
        {id:16,name:'测试16'},
        {id:17,name:'测试17'},
        {id:18,name:'测试18'},
        {id:19,name:'测试19'},
        {id:20,name:'测试20'},
        {id:21,name:'测试21'},
        {id:22,name:'测试22'},
        {id:23,name:'测试23'},
        {id:24,name:'测试24'},
        {id:25,name:'测试25'},
        {id:26,name:'测试26'},
        {id:27,name:'测试27'},
        {id:28,name:'测试28'},
        {id:29,name:'测试29'},
        {id:30,name:'测试30'},
        {id:31,name:'测试31'},
        {id:32,name:'测试32'},
        {id:33,name:'测试33'},
        {id:34,name:'测试34'},
        {id:35,name:'测试35'},
        {id:36,name:'测试36'},
        {id:37,name:'测试37'},
        {id:38,name:'测试38'},
        {id:39,name:'测试39'},
        {id:40,name:'测试40'},
        {id:41,name:'测试41'},
        {id:42,name:'测试42'},
        {id:43,name:'测试43'},
        {id:44,name:'测试44'},
        {id:45,name:'测试45'},
        {id:46,name:'测试46'},
        {id:47,name:'测试47'},
        {id:48,name:'测试48'},
        {id:49,name:'测试49'},
        {id:50,name:'测试50'},
        {id:51,name:'测试51'},
        {id:52,name:'测试52'},
        {id:53,name:'测试53'},
        {id:54,name:'测试54'},
        {id:55,name:'测试55'},
        {id:56,name:'测试56'},
        {id:57,name:'测试57'},
        {id:58,name:'测试58'},
        {id:59,name:'测试59'}
    ]Array.prototype.removeSplice = function(index){   
      var i = 0;
      for(i=0; i<this.length && this[i].id != index; i++);
      if(i > this.length){
      return false;}
      this.splice(i,1);   
      return true;
    }
    var roundNO
    function mathround(){
        roundNO = Math.round(Math.random()*100);
        if(roundNO>person.length-1){
            mathround();
        }else{
            $('#run').html(person[roundNO].name)
            return roundNO;
        }
    }
    var isrun = 0;
    var gogogo;
    function autoStop(){
        if(isrun==1){
            stoprun();
        }
    }
    function startrun(){
        if(isrun==0){
            gogogo = setInterval(mathround,1);
            isrun=1;
            setTimeout(autoStop,1000);
        }
    }
    function stoprun(){
     if(isrun==0){
        alert("请先开始!");
      }else{
        alert(roundNO);
        clearInterval(gogogo);
        isrun = 0;
      }
    }
    </script>    
    </head>
    <body>   <div id="run">
            
        </div>
        <div>
            <input type="button" onclick="startrun()" value="开始" />
            <input type="button" onclick="stoprun()" value="停止" />
        </div></body> 
    </html>
    我发现了这一问题，点击停止弹出对话框后，DIV显示的是下一个随机数；感觉没刹住车；
    改进了下，暂没发现什么问题；
      

  7.   

    经测试ie6,7,8,ff3.6均没发现楼主所说现象。
      

  8.   

    错误放大化；
    <!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=GBK" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    var person = [
        {id:0,name:'测试0'},
        {id:1,name:'测试1'},
        {id:2,name:'测试2'},
        {id:3,name:'测试3'},
        {id:4,name:'测试4'},
        {id:5,name:'测试5'},
        {id:6,name:'测试6'},
        {id:7,name:'测试7'},
        {id:8,name:'测试8'},
        {id:9,name:'测试9'},
        {id:10,name:'测试10'},
        {id:11,name:'测试11'},
        {id:12,name:'测试12'},
        {id:13,name:'测试13'},
        {id:14,name:'测试14'},
        {id:15,name:'测试15'},
        {id:16,name:'测试16'},
        {id:17,name:'测试17'},
        {id:18,name:'测试18'},
        {id:19,name:'测试19'},
        {id:20,name:'测试20'},
        {id:21,name:'测试21'},
        {id:22,name:'测试22'},
        {id:23,name:'测试23'},
        {id:24,name:'测试24'},
        {id:25,name:'测试25'},
        {id:26,name:'测试26'},
        {id:27,name:'测试27'},
        {id:28,name:'测试28'},
        {id:29,name:'测试29'},
        {id:30,name:'测试30'},
        {id:31,name:'测试31'},
        {id:32,name:'测试32'},
        {id:33,name:'测试33'},
        {id:34,name:'测试34'},
        {id:35,name:'测试35'},
        {id:36,name:'测试36'},
        {id:37,name:'测试37'},
        {id:38,name:'测试38'},
        {id:39,name:'测试39'},
        {id:40,name:'测试40'},
        {id:41,name:'测试41'},
        {id:42,name:'测试42'},
        {id:43,name:'测试43'},
        {id:44,name:'测试44'},
        {id:45,name:'测试45'},
        {id:46,name:'测试46'},
        {id:47,name:'测试47'},
        {id:48,name:'测试48'},
        {id:49,name:'测试49'},
        {id:50,name:'测试50'},
        {id:51,name:'测试51'},
        {id:52,name:'测试52'},
        {id:53,name:'测试53'},
        {id:54,name:'测试54'},
        {id:55,name:'测试55'},
        {id:56,name:'测试56'},
        {id:57,name:'测试57'},
        {id:58,name:'测试58'},
        {id:59,name:'测试59'}
    ]Array.prototype.removeSplice = function(index){   
      var i = 0;
      for(i=0; i<this.length && this[i].id != index; i++);
      if(i > this.length){
      return false;}
      this.splice(i,1);   
      return true;
    }
    var roundNO
    function mathround(){
        roundNO = Math.round(Math.random()*100);
        if(roundNO>person.length-1){
            mathround();
        }else{
            $('#run').html(person[roundNO].name)
            return roundNO;
        }
    }
    var isrun = 0;
    var gogogo;
    function autoStop(){
        if(isrun==1){
            stoprun();
        }
    }
    function startrun(){
        if(isrun==0){
            gogogo = setInterval(mathround,1);
            isrun=1;
           if(stoprun){
             setTimeout(autoStop,1000);
             alert("OK");
           }else{
            alert("error");
            setTimeout(autoStop,1000);
            
           }
        }
    }
    function stoprun(){
     if(isrun==0){
        alert("请先开始!");
       return false;
      }else{
        alert(roundNO);
        clearInterval(gogogo);
        isrun = 0;
       return false;
      }
    }
    </script>    
    </head>
    <body>   <div id="run">
            
        </div>
        <div>
            <input type="button" onclick="startrun()" value="开始" />
            <input type="button" onclick="stoprun()" value="停止" />
        </div></body> 
    </html>
      

  9.   

    真正的原因是你点击开始后会自动停止；而你手动点击停止也执行了停止方法，在一般情况下看不出来；
    但当你手动停止点击和自动停止在同一秒时，情况发生了；所以DIV会显示两次值；
      

  10.   

    这个没什么好解释的，因为alert优先与内容显示，实际上你最后一次内容没执行，单alert是已经执行的了
      

  11.   

    setInterval和setTimeout执行的顺序是不可依赖的，你代码里面的setInterval的最后一次和setTimeout的执行顺序是不可依赖的，所以你不能保证setInterval注册的代码在setTimeout之前执行