JavaScript中setInterval不能正确延时？

chromejavascripthtml5动画canvas

解决方案 »

  1.   

    alert会阻断代码执行，虽然不太清除你想实现怎么的效果，你可以吧timer累加放在showcolumns中，并且在执行函数中判断，当到达一定条件时清除定时器即可。
      

  2.   


    我并不需要那个alert 弹窗，浏览网页的人不可能看一次网页点200次确定哈我的意思是，如果我加进去alert，就能明显的看出动画效果，但是去掉alert就只显示最后一帧。 举个例子，你看电影，如果每秒钟弹出一个窗口，那么你就能正常的看到电影的每一帧，但是每次要按下确定；但是不加alert，就只显示电影结尾的演员列表。
      

  3.   

    参考如下，应该是在定时器执行的函数中做判断会比较容易
    var iT=0;
    var timer=null;
    function test()
    {
    if(iT>=5)//控制动作为5次，5次后结束定时器
    clearInterval(timer);//清除定时器
    alert(iT);//事件处理
    iT++;//累加
    }
    timer=setInterval('test()',1000);
      

  4.   

    if(timer<=200)
    {
    setInterval(showcolumns(),1000);
    timer++;
    }
    如果你这段代码是放在循环中的，那么会在瞬间执行完毕，也就是你延时1秒执行了200次。
    但是如果你要200秒来完成执行，那么你需要这样function showcolumns()
    {
      if(timer<=200)
      {
        setInterval(showcolumns(),1000);
        timer++;
      }
    }
    timer=1;
    showcolumns();
      

  5.   

    看成用setTimeout了， 如果用setTimeout可以这样用。
      

  6.   


    我觉得不是我代码逻辑上的问题，我的代码如下：
    var timer=0;
    function showcolumns()
    {
    context.fillStyle = c_rec1;
    for(i=0;i<data_list.length;i++)
    {
    x = zero_spot_x+i*column_width;
    y = zero_spot_y - c_height_array[i]*timer/200;
    context.fillRect(x+5,y,column_width-10,c_height_array[i]*timer/200);
    context.strokeRect(x+5,y,column_width-10,c_height_array[i]*timer/200);
    context.restore();  
                context.save(); 
    }
    timer++;
    if(timer<=200)
    {
    //alert(timer);
    setInterval(showcolumns(),1000);
    }
    else
    timer = 0;
    }
      

  7.   


    我觉得你说的这个倒是有可能不过！
    我是读了别人的一个时钟的例子，仿照着时钟做的。别人的时钟就能50毫秒一次用setInterval刷新。
      

  8.   

    我找到了另外一篇文章，我怀疑可能与这个相关
    http://fins.iteye.com/blog/622493
      

  9.   


    我觉得你说的这个倒是有可能不过！
    我是读了别人的一个时钟的例子，仿照着时钟做的。别人的时钟就能50毫秒一次用setInterval刷新。
    能否有个较全的代码嘞？
      

  10.   


    我觉得你说的这个倒是有可能不过！
    我是读了别人的一个时钟的例子，仿照着时钟做的。别人的时钟就能50毫秒一次用setInterval刷新。
    能否有个较全的代码嘞？有的 我贴出来 <!doctype html>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    <SCRIPT LANGUAGE='JavaScript'> 
    //屏蔽js错误 
    function ResumeError() { 
    return true; 
    } 
    window.onerror = ResumeError; 
    </SCRIPT>
    </head>
    <body>
    <h2>canvas 挂钟</h2>
    <canvas id="clock" width="500" height="500">
    你的破
              <!--[if lte IE 10]>
              IE
    <![endif]-->
              浏览器不支持canvas标签，无法看到我们的激情小图片
    </canvas><script>
    var clock=document.getElementById('clock');
    var cxt=clock.getContext('2d');
    var now1 = new Date();
    //表的配色
    //var bp = '#FFFFFF';//表盘
    var bk = '#ff9900';//表框
    var sk = '#0066CC';//时刻度
    var fk = '#0066CC';//分刻度
    var sz = '#333399';//时针
    var fz = '#333399';//分针
    var mz = '#CCCC00';//秒针
    var mh = '#FF0033';//秒针后小圆点
    var mq = '#FF0033';//秒针钱小圆点
    function drawClock(){
    //清除画布
    cxt.clearRect(0,0,500,500);
    var now =new Date();
    var msec = now.getMilliseconds();
    var sec=now.getSeconds();
    var min=now.getMinutes();
    var hour=now.getHours();
    //小时必须获取浮点类型(小时+分数转化成的小时)
    hour=hour+min/60;
    //问题 19:23:30
    //将24小时进制转换为12小时
    hour=hour>12?hour-12:hour;
    //表盘(蓝色)
    //设置渐变色
    var bbp = cxt.createRadialGradient(250,250,0,250,250,250);
    bbp.addColorStop(0.4,'#fff');
    bbp.addColorStop(1,'#ffcc00');
    cxt.lineWidth=12;
    cxt.strokeStyle=bk;
    cxt.fillStyle = bbp;
    cxt.beginPath();
    cxt.arc(250,250,200,0,360,false);
    cxt.closePath();
    cxt.stroke();
    cxt.fill();
    //刻度
    //时刻度
    for(var i=0;i<12;i++){
    cxt.save();
    //设置时针的粗细
    cxt.lineWidth=7;
    //设置时针的颜色
    cxt.strokeStyle=sk;
    //先设置0,0点
    cxt.translate(250,250);
    //再设置旋转角度
    cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
    cxt.beginPath();
    cxt.moveTo(0,-170);
    cxt.lineTo(0,-190);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    }
    //分刻度
    for(var i=0;i<60;i++){
    cxt.save();
    //设置分刻度的粗细
    cxt.lineWidth=5;
    //设置颜色(使用时刻度的颜色)
    cxt.strokeStyle=fk;
    //设置或者重置画布的0，0点
    cxt.translate(250,250);
    //设置旋转角度
    cxt.rotate(i*6*Math.PI/180);
    //画分针刻度
    cxt.beginPath();
    cxt.moveTo(0,-180);
    cxt.lineTo(0,-190);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    }
    //时针
    cxt.save();
    //设置时针风格
    cxt.lineWidth=7;
    //设置时针的颜色
    cxt.strokeStyle=sz;
    //设置异次元空间的0，0点
    cxt.translate(250,250);
    //设置旋转角度
    cxt.rotate(hour*30*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0,-110);
    cxt.lineTo(0,10);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    //分针
    cxt.save();
    //设置分针的风格
    cxt.lineWidth=5;
    cxt.strokeStyle=fz;
    //设置异次元空间分针画布的圆心
    cxt.translate(250,250);
    //设置旋转角度
    cxt.rotate(min*6*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0,-140);
    cxt.lineTo(0,15);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    //秒针
    cxt.save();
    //设置秒针的风格
    //颜色红色
    cxt.strokeStyle=mz;
    //粗细 3像素
    cxt.lineWidth=3;
    //重置0，0点
    cxt.translate(250,250);
    //设置旋转角度
    //cxt.rotate(sec + msec*0.006*Math.PI/180);
    cxt.rotate((sec+msec/1000)*6*Math.PI/180);
    //画图
    cxt.beginPath();
    cxt.moveTo(0,-170);
    cxt.lineTo(0,20);
    cxt.closePath();
    cxt.stroke();
    //画出时针、分针、秒针的交叉点、
    cxt.beginPath();
    cxt.arc(0,0,5,0,360,false);
    cxt.closePath();
    //设置填充样式
    cxt.fillStyle=mh;
    cxt.fill();
    //设置笔触样式(秒针已设置)
    cxt.stroke();
    //设置秒针前段的小圆点
    cxt.beginPath();
    cxt.arc(0,-150,5,0,360,false);
    cxt.closePath();
    //设置填充样式
    cxt.fillStyle=mq;
    cxt.fill();
    //设置笔触样式(秒针已设置)
    cxt.stroke();
    cxt.restore();
    }
    //使用setInterval(代码,毫秒时间)  让时钟动起来
    drawClock();
    setInterval(drawClock,50);
    </script>
    </body>
    </html>
      

  11.   


    我觉得你说的这个倒是有可能不过！
    我是读了别人的一个时钟的例子，仿照着时钟做的。别人的时钟就能50毫秒一次用setInterval刷新。
    能否有个较全的代码嘞？我再把我写的也贴出来吧，真心搞不懂哪里有问题了<!doctype html>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    <SCRIPT LANGUAGE='JavaScript'> 
    //屏蔽js错误 
    function ResumeError() { 
    return true; 
    } 
    window.onerror = ResumeError; 
    </SCRIPT>
    </head>
    <body>
    <h2>canvas 挂钟</h2>
    <canvas id="clock" width="500" height="500">
    你的破
              <!--[if lte IE 10]>
              IE
    <![endif]-->
              浏览器不支持canvas标签，无法看到我们的激情小图片
    </canvas><script>
    var clock=document.getElementById('clock');
    var cxt=clock.getContext('2d');
    var now1 = new Date();
    //表的配色
    //var bp = '#FFFFFF';//表盘
    var bk = '#ff9900';//表框
    var sk = '#0066CC';//时刻度
    var fk = '#0066CC';//分刻度
    var sz = '#333399';//时针
    var fz = '#333399';//分针
    var mz = '#CCCC00';//秒针
    var mh = '#FF0033';//秒针后小圆点
    var mq = '#FF0033';//秒针钱小圆点
    function drawClock(){
    //清除画布
    cxt.clearRect(0,0,500,500);
    var now =new Date();
    var msec = now.getMilliseconds();
    var sec=now.getSeconds();
    var min=now.getMinutes();
    var hour=now.getHours();
    //小时必须获取浮点类型(小时+分数转化成的小时)
    hour=hour+min/60;
    //问题 19:23:30
    //将24小时进制转换为12小时
    hour=hour>12?hour-12:hour;
    //表盘(蓝色)
    //设置渐变色
    var bbp = cxt.createRadialGradient(250,250,0,250,250,250);
    bbp.addColorStop(0.4,'#fff');
    bbp.addColorStop(1,'#ffcc00');
    cxt.lineWidth=12;
    cxt.strokeStyle=bk;
    cxt.fillStyle = bbp;
    cxt.beginPath();
    cxt.arc(250,250,200,0,360,false);
    cxt.closePath();
    cxt.stroke();
    cxt.fill();
    //刻度
    //时刻度
    for(var i=0;i<12;i++){
    cxt.save();
    //设置时针的粗细
    cxt.lineWidth=7;
    //设置时针的颜色
    cxt.strokeStyle=sk;
    //先设置0,0点
    cxt.translate(250,250);
    //再设置旋转角度
    cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
    cxt.beginPath();
    cxt.moveTo(0,-170);
    cxt.lineTo(0,-190);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    }
    //分刻度
    for(var i=0;i<60;i++){
    cxt.save();
    //设置分刻度的粗细
    cxt.lineWidth=5;
    //设置颜色(使用时刻度的颜色)
    cxt.strokeStyle=fk;
    //设置或者重置画布的0，0点
    cxt.translate(250,250);
    //设置旋转角度
    cxt.rotate(i*6*Math.PI/180);
    //画分针刻度
    cxt.beginPath();
    cxt.moveTo(0,-180);
    cxt.lineTo(0,-190);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    }
    //时针
    cxt.save();
    //设置时针风格
    cxt.lineWidth=7;
    //设置时针的颜色
    cxt.strokeStyle=sz;
    //设置异次元空间的0，0点
    cxt.translate(250,250);
    //设置旋转角度
    cxt.rotate(hour*30*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0,-110);
    cxt.lineTo(0,10);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    //分针
    cxt.save();
    //设置分针的风格
    cxt.lineWidth=5;
    cxt.strokeStyle=fz;
    //设置异次元空间分针画布的圆心
    cxt.translate(250,250);
    //设置旋转角度
    cxt.rotate(min*6*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0,-140);
    cxt.lineTo(0,15);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    //秒针
    cxt.save();
    //设置秒针的风格
    //颜色红色
    cxt.strokeStyle=mz;
    //粗细 3像素
    cxt.lineWidth=3;
    //重置0，0点
    cxt.translate(250,250);
    //设置旋转角度
    //cxt.rotate(sec + msec*0.006*Math.PI/180);
    cxt.rotate((sec+msec/1000)*6*Math.PI/180);
    //画图
    cxt.beginPath();
    cxt.moveTo(0,-170);
    cxt.lineTo(0,20);
    cxt.closePath();
    cxt.stroke();
    //画出时针、分针、秒针的交叉点、
    cxt.beginPath();
    cxt.arc(0,0,5,0,360,false);
    cxt.closePath();
    //设置填充样式
    cxt.fillStyle=mh;
    cxt.fill();
    //设置笔触样式(秒针已设置)
    cxt.stroke();
    //设置秒针前段的小圆点
    cxt.beginPath();
    cxt.arc(0,-150,5,0,360,false);
    cxt.closePath();
    //设置填充样式
    cxt.fillStyle=mq;
    cxt.fill();
    //设置笔触样式(秒针已设置)
    cxt.stroke();
    cxt.restore();
    }
    //使用setInterval(代码,毫秒时间)  让时钟动起来
    drawClock();
    setInterval(drawClock,50);
    </script>
    </body>
    </html>
      

  12.   


    我觉得你说的这个倒是有可能不过！
    我是读了别人的一个时钟的例子，仿照着时钟做的。别人的时钟就能50毫秒一次用setInterval刷新。
    能否有个较全的代码嘞？贴重复了。。这个才是我的：
      

  13.   


    我觉得你说的这个倒是有可能不过！
    我是读了别人的一个时钟的例子，仿照着时钟做的。别人的时钟就能50毫秒一次用setInterval刷新。
    能否有个较全的代码嘞？贴重复了。。这个才是我的：没有代码？
      

  14.   

    首先js是单线程的，定时器做的事是阻塞线程，以达到延时的目的。
    出现这种情况的关键点是，定时器只对定时的这个方法有效，包含在这个方法体外的js还是会照样执行。
    这样就是形成N个定时器排队的情况。
    你可以将这个循环都写入定时器，才能达到你要的效果。
      

  15.   


    if和for循环在执行过程中会阻塞浏览器的渲染。而setTimeout和setInterval则正是解决这个阻塞问题的方法。
    如：        //这样只看到最后结果
    for(var i=0;i<1000;i++){
    document.getElementsByTagName('div')[0].innerHTML=i
    }        //这样则能看到数字的变化(原因就在于每隔一段时间执行一次循环体，而不是像上面一样不间断连续执行)
           //(1)用setInterval
    var i=0;
    function foo(){
         if(i<1000){
             document.getElementsByTagName('div')[0].innerHTML=i;
     i++;
          }
    };
            setInterval(foo,100)
           //(1)用setTimeout
    var i=0;
    function foo(){
         if(i<1000){
             document.getElementsByTagName('div')[0].innerHTML=i;
     i++;
                     setTimeout(foo,100)
          }
    };
            setTimeout(foo,100)PS：延时建议用setTimeout.
    setInterval和setTimeout在延时机制上是不同的，在程序比较复杂的时候   setInterval在无法保证定时器的准确性。两者具体的区别楼主可以自行google一下。
      

  16.   

    alert会阻断代码执行 就不会这样的了
      

  17.   

    setInterval(showcolumns,1000);
    即可。
    setInterval、setTimeout的第一个参数是个function，你写的showcolumns()会立即执行的。
      

  18.   

    AWWWB.COM网站克隆器 非常好用哦 呵呵
      

  19.   

    window.setInterval("a()","5000")这个写在被调用方法的外边，第一个参数也是字符串， 第二个参数要是字符串 。
    setTimeout("a()",2000)这个必须写在方法内，自己调用自己，第二个参数是整数 。
      

  20.   

    你这是把setInterval当成setTimeout用了吧
      

  21.   


    恩 你说得对 是 那个名字的问题  另外setInerval和setTimeout那个说的也很好 谢谢啦