BOM编程②(定时器、执行队列)

举报
十八岁讨厌编程 发表于 2022/08/06 00:01:36 2022/08/06
【摘要】 文章目录 定时器两种定时器setTimeout() 定时器停止 setTimeout() 定时器setInterval() 定时器停止 setInterval() 定时器this JS执行机制...

定时器

两种定时器

window 对象给我们提供了 2 个非常好用的方法-定时器

  • setTimeout()
  • setInterval()

setTimeout() 定时器

语法:

window.setTimeout(调用函数, [延迟的毫秒数]);

  
 
  • 1

setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。(就跟定时炸弹一样)

注意:

  • window 可以省略
  • 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
  • 延迟的毫秒数省略默认是 0,如果写,必须是毫秒
  • 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符

拓:
setTimeout() 这个调用函数我们也称为回调函数 callback

普通函数是按照代码顺序直接调用。而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。

简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。

以前涉及的的 element.onclick = function(){} 或者element.addEventListener(“click”, fn); 里面的 函数也是回调函数

停止 setTimeout() 定时器

window.clearTimeout(timeoutID)

  
 
  • 1

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器
注意:

  • window 可以省略
  • 里面的参数就是定时器的标识符

setInterval() 定时器

语法:

window.setInterval(回调函数, [间隔的毫秒数]);

  
 
  • 1

setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
注意:

  • window 可以省略
  • 这个调用函数可以直接写函数,或者写函数名或者采取字符串 '函数名()' 三种形式。
  • 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
  • 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
  • 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。

案例:网页倒计时(三个黑色盒子里面分别存放时分秒)

<body>
    <div class = 'hour'></div>
    <div class="minute"></div>
    <div class="second"></div>
    <script>
        let hour = document.getElementsByClassName('hour')[0];
        setInterval(function(){
            let time = new Date();
            hour.innerHTML = time.getHours();
            hour.nextElementSibling.innerHTML = time.getMinutes();
            hour.nextElementSibling.nextElementSibling.innerHTML = time.getSeconds();
        },1000);
    </script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

注意:
①这个Date对象不能放在回调函数的外面去了,否则他得到的就是一个静态的时间,时候不会随回调而变化的。
②如果不想要页面刚开启的时候那个空白,可以先调用一次函数。

停止 setInterval() 定时器

window.clearInterval(intervalID);

  
 
  • 1

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器
注意:

  • window 可以省略
  • 里面的参数就是定时器的标识符

案例:发送短信
点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信
在这里插入图片描述
思路:
① 按钮点击之后,会禁用 disabled 为true
② 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
③ 里面秒数是有变化的,因此需要用到定时器
④ 定义一个变量,在定时器里面,不断递减
⑤ 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态。

代码实现:

<body>
    <input type="text">
    <button>发送</button>
    <script>
        let button = document.getElementsByTagName('button')[0];
        button.onclick = function(){
            alert('短信已经发送');
            button.disabled = true;
            let count = 10;
            let huidiao = function(){
                button.innerHTML = count + '秒后可重新发送';
                if(count == 0){
                    clearInterval(jishi);
                    button.disabled = false;
                    button.innerHTML = '发送';
                }
                count--;
            };
            huidiao();
            let jishi = setInterval(huidiao,1000);
        }
    </script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

this

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象

现阶段,我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例
<body>
    <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

        // 1. 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window)
        console.log(this);

        function fn() {
            console.log(this);

        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);

        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象

            })
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();
    </script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

JS执行机制

JS是单线程

JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

例如:
以下代码的执行结果是 123

 console.log(1);
 setTimeout(function () {
   console.log(3);
 }, 1000);
 console.log(2);


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

同步和异步

为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步异步

同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

他们的本质区别: 这条流水线上各个流程的执行顺序不同

同步、异步任务

同步任务
同步任务都在主线程上执行,形成一个执行栈。

异步任务
JS 的异步是通过回调函数实现的。

一般而言,异步任务有以下三种类型:
1、普通事件,如 click、resize 等
2、资源加载,如 load、error 等
3、定时器,包括 setInterval、setTimeout 等
异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。

例如:以下代码

 console.log(1);
 setTimeout(function () {
   console.log(3);
 }, 0);
 console.log(2);


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述

JS执行机制

  1. 先执行执行栈中的同步任务。
  2. 异步任务(回调函数)放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。

在这里插入图片描述
例如以下代码:

 console.log(1);
 document.onclick = function() {
   console.log('click');
 }
 console.log(2);
 setTimeout(function() {
   console.log(3)
 }, 3000)

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop).

注意:
①事件循环可以保证异步队列中没有任务被忽略而错过
②异步进程处理起到控制异步任务进入异步队列的作用:
在上面的代码中检测到点击之后,他才会把那个回调函数放到异步队列中
3秒到了之后,他才会把对应的回调函数放到异步队列当中。

文章来源: blog.csdn.net,作者:十八岁讨厌编程,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/zyb18507175502/article/details/123818201

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。