zoukankan      html  css  js  c++  java
  • 你所不了解的setTimeout

    关于setInterval()和setTimeout()返回值

    setInterval(),setTimeout() 会返回一个值,一般认为是ID,将这个ID值传递给clearInterval(),clearTimeout() 可以取消执行,例如:

    1. var intervalTimer=setInterval(function(){
    2. console.log(1)
    3. },3000);
    4. console.log(intervalTimer); //一般是一个数字,Number
    5. button.onclick=function(){
    6. clearInterval(intervalTimer);
    7. };

    关于setInterval()和setTimeout()中回调函数中的this

    setInterval(),setTimeout() 方法是浏览器 window 对象提供,所以第一个参数函数中的this指向window对象,这跟变量的作用域有关:

    1. var a=1;
    2. var obj={
    3. a:2,
    4. b:function(){
    5. setTimeout(function(){
    6. console.log(this.a);//这里返回的是:1;
    7. },2000);
    8. }
    9. };
    10. obj.b();

    当然你可以通过使用bind()方法来改变这个情况:

    1. var a=1;
    2. var obj={
    3. a:2,
    4. b:function(){
    5. setTimeout(function(){
    6. console.log(this.a);//这里返回的是:2;
    7. }.bind(this),2000);//注意这行
    8.  
    9. }
    10. };
    11. obj.b();

    关于setInterval()和setTimeout()的参数

    大家都知道setInterval()和setTimeout()可以接收两个参数,第一个参数是需要回调的函数,必须传入的参数,第二个参数是时间间隔,毫秒数,可以省略,这个可以看文章的下面,

    不传第二个参数,浏览器自动配置时间,在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。

    但是我要说的当然不是这个,我要说的是setInterval()和setTimeout()可以接收更多的参数,那么这些参数是干什么用的呢?从第三个参数开始,依次用来表示第一个参数(回调函数)传入的参数,例如:

    1. setTimeout(function(a,b){
    2. console.log(1+a+b);//这里打印的是:8
    3. },1000,3,4);

    当然一些古老的浏览器是不支持的。

    关于clearInterval()和clearTimeout()

    clearInterval()和clearTimeout()其实是通用的,就是说你可以用 clearInterval() 取消 setTimeout() 执行,clearTimeout()同样可以取消 setInterval() 执行。

    1. var intervalTimer=setInterval(function(){
    2. console.log(1)
    3. },3000);
    4. console.log(intervalTimer);
    5. button.onclick=function(){
    6. clearTimeout(intervalTimer); //注意这里,不是clearInterval哦
    7. };

    点击查看更多关于定时器的介绍

  • 相关阅读:
    angularjs中的指令
    git笔记
    webpack.config.js
    webpack开发react常用插件和依赖
    angularjs中的分页指令
    angularjs中的排序和过滤
    react学习
    gulp学习
    Javascript 判断变量类型的陷阱 与 正确的处理方式
    Fn.bind.apply() 解决 new 操作符不能用与 apply 或 call 同时使用
  • 原文地址:https://www.cnblogs.com/flsummer/p/5312057.html
Copyright © 2011-2022 走看看