JS笔记2-定时器的使用

1.setInterval和setTimeout
用法和区别
2.clearInterval和clearTimeout
用法和区别
3.实例
4.数码时钟,倒计时
5.延时提示框

1.
setInterval(func,delay);//间隔型定时器
setTimeout(func,delay);//延时型定时器
注意,这里的func只能是函数的引用,而不是调用,形如func()的形式是完全错误的,因为func()带来的是func函数调用后的返回值,而不是对该函数的引用。
setInterval是每delay个时间执行一次,而setTimeout是delay时间后只执行一次。

2.
它们对应的清空也显然不同,
前者是clearInterval(id);
后者是clearTimeout(id);
务必不要混淆。

3.计时器的开启与关闭实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
            var oBtn1=document.getElementById("btn1");
            var oBtn2=document.getElementById("btn2");
            var timer=null;

            oBtn1.onclick=function(){
                timer=setInterval(function(){
                alert('a');
            },1000);
            }
            oBtn2.onclick=function(){
                clearInterval(timer);
            }
        }

    </script>
</head>
<body>
    <input id="btn1" type="button" value="begin"/>
    <input id="btn2" type="button" value="end"/>
</body>
</html>

代码块2

    <script type="text/javascript">
        function show(){
            alert('a');
        }
                 /*   setInterval(show,1000);*/
                 //每1000ms执行一次
                 /*   setTimeout(show,1000);*/
                 //只执行一次
    </script>

4.数码时钟的设计思想和tips
Date对这里写代码片
字符串连接,防止数字相加的方法
空位补零
兼容性问题解决:charAt

5.延时提示框的思想和bug

简化合并代码的思想

以下内容转自
[http://www.mxria.com/helps/js_error/trap_error_1572.htm]

由于 JavaScript 是异步的,可以使用 setTimeout 和 setInterval 来计划执行函数。

注意:定时处理不是ECMAScript 的标准,它们在 DOM (文档对象模型) 被实现。

function foo(){}var id = setTimeout(foo,1000);// 返回一个大于零的数字 当
setTimeout 被调用时,它会返回一个 ID 标识并且计划在将来大约1000 毫秒后调用 foo 函数。 foo函数只会被执行一次。

基于 JavaScript 引擎的计时策略,以及本质上的单线程运行方式,所以其它代码的运行可能会阻塞此线程。 因此没法确保函数会在
setTimeout 指定的时刻被调用。

作为第一个参数的函数将会在全局作用域中执行,因此函数内的 this 将会指向这个全局对象。

functionFoo(){this.value =42;this.method =function(){// this 指向全局对象
console.log(this.value);// 输出:undefined};
setTimeout(this.method,500);}newFoo(); 注意:setTimeout 的第一个参数是函数对象,一个常犯的错误是这样的 setTimeout(foo(), 1000), 这里回调函数是 foo
的返回值,而不是foo本身。 大部分情况下,这是一个潜在的错误,因为如果函数返回 undefined,setTimeout 也不会报错。

setInterval 的堆调用 setTimeout 只会执行回调函数一次,不过 setInterval - 正如名字建议的 - 会每隔
X 毫秒执行函数一次。 但是却不鼓励使用这个函数。

当回调函数的执行被阻塞时,setInterval 仍然会发布更多的毁掉指令。在很小的定时间隔情况下,这会导致回调函数被堆积起来。

function foo(){// 阻塞执行 1 秒} setInterval(foo,1000); 上面代码中,foo
会执行一次随后被阻塞了一分钟。

在 foo 被阻塞的时候,setInterval 仍然在组织将来对回调函数的调用。 因此,当第一次 foo
函数调用结束时,已经有10次函数调用在等待执行。

处理可能的阻塞调用 最简单也是最容易控制的方案,是在回调函数内部使用 setTimeout 函数。

function foo(){// 阻塞执行 1 秒
setTimeout(foo,1000);} foo(); 这样不仅封装了 setTimeout 回调函数,而且阻止了调用指令的堆积,可以有更多的控制。 foo 函数现在可以控制是否继续执行还是终止执行。

手工清空定时器 可以通过将定时时产生的 ID 标识传递给 clearTimeout 或者 clearInterval 函数来清除定时,
至于使用哪个函数取决于调用的时候使用的是 setTimeout 还是 setInterval。

var id = setTimeout(foo,1000); clearTimeout(id); 清除所有定时器
由于没有内置的清除所有定时器的方法,可以采用一种暴力的方式来达到这一目的。

// 清空”所有”的定时器for(var i =1; i <1000; i++){
clearTimeout(i);} 可能还有些定时器不会在上面代码中被清除(译者注:如果定时器调用时返回的 ID 值大于 1000), 因此我们可以事先保存所有的定时器 ID,然后一把清除。

隐藏使用 eval setTimeout 和 setInterval 也接受第一个参数为字符串的情况。
这个特性绝对不要使用,因为它在内部使用了 eval。

注意:由于定时器函数不是 ECMAScript 的标准,如何解析字符串参数在不同的 JavaScript 引擎实现中可能不同。
事实上,微软的 JScript 会使用 Function 构造函数来代替 eval 的使用。

function foo(){// 将会被调用}function bar(){function foo(){// 不会被调用}
setTimeout(‘foo()’,1000);} bar(); 由于 eval 在这种情况下不是被直接调用,因此传递到 setTimeout 的字符串会自全局作用域中执行; 因此,上面的回调函数使用的不是定义在 bar 作用域中的局部变量 foo。

建议不要在调用定时器函数时,为了向回调函数传递参数而使用字符串的形式。

function foo(a, b, c){}// 不要这样做 setTimeout(‘foo(1,2, 3)’,1000)//
可以使用匿名函数完成相同功能 setTimeout(function(){
foo(a, b, c);},1000) 注意:虽然也可以使用这样的语法 setTimeout(foo, 1000, a, b, c), 但是不推荐这么做,因为在使用对象的属性方法时可能会出错。 (译者注:这里说的是属性方法内,this 的指向错误)

结论 绝对不要使用字符串作为 setTimeout 或者 setInterval 的第一个参数,
这么写的代码明显质量很差。当需要向回调函数传递参数时,可以创建一个匿名函数,在函数内执行真实的回调函数。

另外,尽量避免使用 setInterval,因为它的定时执行不会被 JavaScript 阻塞

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值