Javascript-定时器

方法1：

 
  setInterval( 
  function 
  (){}, 
  time) 
  ; 
 

setInterval有俩个参数，前面一个表示执行的语句，后面一个表示间隔的时间（单位是毫秒）

看如下代码:

        var startTime=new Date();
        setInterval(function (){
            var lastTime=new Date();
            console.log(lastTime-startTime);
            startTime=lastTime;
        },1000);

每个1000ms就执行这个函数，输出差值。

函数功能呢应该可以看出来，函数还是有一定误差的，也有点不稳。

虽然有点不准，但是在物体的运动上面有很多应用。物体可以随着时间自己动起来。

setInterval("console.log('cyl')",100);

这样也可以，不过没什么作用。基本可以当作不知道。

这个函数一旦开始就会不停的进行下去，万一我们想让它停止了？运动的物体也会停止嘛。

这个是有方法的。

扫描二维码关注公众号，回复： 155877 查看本文章

我们注意到每一个setInterval()函数是有一个返回值的。这个返回值是setInterval的标识，通过这个标识和一个函数就可准确的"停止"某一个setInterval()

        var time1=setInterval(function() {
        },1000);
        var time2=setInterval(function() {
        },100);
        var time3=setInterval(function() {
        },10);

唯一标识确定了setInterval()是那个。

clearInterval(标识符）就不在进行下一个setInterval

看如下代码:

        var i=0;
        var flag=setInterval(function(){
            if (i>10) {
                clearInterval(flag);
            }
            console.log(i++);
        },1000)

每隔1秒打印一个，当i>10时就不在进行setInterval

运行结果是这样的：

打印出了11，因为i=11时满足大于10了，停止了下一个setInterval的运行，但是这轮的的代码还是要进行完的。

        var i=0;
        var flag=setInterval(function(){
            console.log(i++);
            if (i>10) {
                clearInterval(flag);
            }
        },1000)

这个就可以了。

把判断放在后面的区别。

方法2：setTimeout(function(){},time)

和setInterval()差不多，前面一个是执行的语句，而后面一个是指间隔多少时间（单位毫秒）在执行前面的语句，仅一次。

看如下代码:

        var startTime=new Date().getTime();
        setTimeout(function() {
            var lastTime=new Date().getTime();
            console.log(lastTime-startTime);
        },1000)

这个函数的用途比如：没有vip的我观看vip电影时，六分钟后电影就关闭了。

同样的，比如在六分钟内，我充了一个vip那么是不是就不能在执行"电影关闭"的操作了。

clearTimeout(flag)就是这个用途。

        var startTime=new Date().getTime();
        var flag=setTimeout(function() {
            var lastTime=new Date().getTime();
            console.log(lastTime-startTime);
        },1000)
        clearTimeout(flag);

并没有输出时间差。

这里有几点值得注意

setInterval()和setTimeout()不必担心它们会重复flag

var flag1=setTimeout(function() {
        },1000)
        var flag2=setInterval(function(){},10);

全局对象window方法，内部this指向window

猜你喜欢