JavaScript中setInterval不能正确延时？

mryuanchao 2014-05-06 12:00:56

新手初探JavaScript，想用setInterval配合HTML5的canvas标签来将一些表格以动画形式显示出来，这个是背景。
if(timer<=200)
{
setInterval(showcolumns(),1000);
timer++;
}
理论上讲，这个循环执行完成需要200秒，但是我用Chrome打开他时瞬间就显示到最后一个效果了（也就是timer=200时的效果）。
但是呢，如果我把代码添加一行弹窗：
if(timer<=200)
{
alert(timer);
setInterval(showcolumns(),1000);
timer++;
}
就能看到一帧一帧的效果。
请问这是什么问题导致的？我应该用怎样的方法来实现同样的效果呢？

...全文

549 29 打赏收藏转发到动态举报

写回复

用AI写文章

29 条回复

切换为时间正序

请发表友善的回复…

发表回复

mryuanchao 2014-05-08

打赏
举报

引用 17 楼 qwklove 的回复:

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一下。

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

peter王 2014-05-08

打赏
举报

不好意思问题没看清楚

peter王 2014-05-08

打赏
举报

200次瞬间就没了。。。所以看不出来

maoyuns 2014-05-07

打赏
举报

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

阿鱼 2014-05-07

打赏
举报

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一下。

Onlyfu 2014-05-07

打赏
举报

你这是把setInterval当成setTimeout用了吧

wylwyl1108 2014-05-07

打赏
举报

双引号没加，！！

别闹腰不好 2014-05-07

打赏
举报

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

912263153 2014-05-07

打赏
举报

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

li418418qq 2014-05-07

打赏
举报

setInterval("showcolumns()",1000);

blueprint1988 2014-05-07

打赏
举报

19L说的对，我怎么觉得就是你逻辑写错了啊

xuefeng0707 2014-05-07

打赏
举报

19L正解。

whowhen21 2014-05-07

打赏
举报

setInterval(showcolumns,1000);

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

qq137051908 2014-05-06

打赏
举报

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


function showcolumns()
{
  if(timer<=200)
  {
    setInterval(showcolumns(),1000);
    timer++;
  }
}
timer=1;
showcolumns();

人生难得一只鸡 2014-05-06

打赏
举报

参考如下，应该是在定时器执行的函数中做判断会比较容易

var iT=0;
var timer=null;
function test()
{
	if(iT>=5)//控制动作为5次，5次后结束定时器
		clearInterval(timer);//清除定时器
	alert(iT);//事件处理
	iT++;//累加
}
timer=setInterval('test()',1000);

mryuanchao 2014-05-06

打赏
举报

引用 1 楼 Return_false 的回复:

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

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

人生难得一只鸡 2014-05-06