JavaScript核心-定时器-异步同步等（三）

最新推荐文章于 2024-08-20 19:21:56 发布
最新推荐文章于 2024-08-20 19:21:56 发布
阅读量3.9k 收藏 9
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46199553/article/details/119678173
本文详细讲解了键盘事件的使用，如keyup事件监听s键输入，以及BOM中的window对象和事件，如window.onload和window.onresize。实例演示了京东搜索输入和快递单号实时更新，以及如何利用BOM对象模型进行响应式布局和定时器操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

8.1 常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。
在这里插入图片描述
注意：

  1. 如果使用addEventListener 不需要加 on
    onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
    三个事件的执行顺序是： keydown – keypress — keyup

8.2 键盘事件对象

在这里插入图片描述
注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

案例： 模拟京东按键输入内容

核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
搜索框获得焦点： 使用 js 里面的 focus() 方法


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点： 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) {
                search.focus();
            }
        })
    </script>
</body>

</html>

案例： 模拟京东快递单号查询
在这里插入图片描述
快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的文字
同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>
</body>

1.1 什么是 BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

DOM:
文档对象模型
DOM 就是把「文档」当做一个「对象」来看待
DOM 的顶级对象是 document
DOM 主要学习的是操作页面元素
DOM 是 W3C 标准规范

BOM:
浏览器对象模型
把「浏览器」当做一个「对象」来看待
BOM 的顶级对象是 window
BOM 学习的是浏览器窗口交互的一些对象
BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

1.2 BOM 的构成

BOM 比 DOM 更大，它包含 DOM。
在这里插入图片描述
在这里插入图片描述

2. window 对象的常见事件

2.1 窗口加载事件

在这里插入图片描述
window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
注意：

  1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
  2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。
  3. 如果使用 addEventListener 则没有限制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {

            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
</head>

<body>

    <button>点击</button>

</body>

</html>

在这里插入图片描述
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

2.2 调整窗口大小事件

在这里插入图片描述
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
注意：

  1. 只要窗口大小发生像素变化，就会触发这个事件。
  2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>

</html>

3.1 两种定时器

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

3.2 setTimeout() 定时器

在这里插入图片描述
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. setTimeout 
        // 语法规范：  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
        // setTimeout(function() {
        //     console.log('时间到了');

        // }, 2000);
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>
</body>

</html>

案例： 5秒后自动关闭的广告

核心思路：5秒之后，就把这个广告隐藏起来
用定时器setTimeout

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

</html>

3.3 停止 setTimeout() 定时器

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

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符 。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');

        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
</body>

</html>

3.4 setInterval() 定时器

在这里插入图片描述

    // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');

        }, 1000);
        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>

案例： 倒计时

在这里插入图片描述
这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
三个黑色盒子里面分别存放时分秒
三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
最好采取封装函数的方式， 这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-8-14 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html>

3.5 停止 setInterval() 定时器

在这里插入图片描述

 <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>

案例： 发送短信

在这里插入图片描述
按钮点击之后，会禁用 disabled 为true
同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
里面秒数是有变化的，因此需要用到定时器
定义一个变量，在定时器里面，不断递减
如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

 手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>

3.6 this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象
现阶段，我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
  2. 方法调用中谁调用this指向谁
    3.构造函数中this指向构造函数的实例
<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>

4. JS 执行机制

4.1 JS 是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

4.2 同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
同步：
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

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

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

在这里插入图片描述
在这里插入图片描述

  1. 先执行执行栈中的同步任务。
  2. 异步任务（回调函数）放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
    在这里插入图片描述
    在这里插入图片描述

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

5.1 什么是 location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL 的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link
在这里插入图片描述

对象的属性

在这里插入图片描述

  <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);
    </script>

主要练习数据在不同页面中的传递。

第一个登录页面，里面有提交表单， action 提交到 index.html页面
第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
第二个页面之所以可以使用第一个页面的数据，是利用了URL 里面的 location.search参数
在第二个页面中，需要把这个参数提取。
第一步去掉？ 利用 substr
第二步 利用=号分割 键 和 值 split(‘=‘)
第一个数组就是键 第二个数组就是值

 <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>

 <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>

在这里插入图片描述

6. navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = “”; //手机
} else {
window.location.href = “”; //电脑
}

7. history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。

在这里插入图片描述

(王道计算机组成原理)第六章总线-第二节：总线事务和定时
快乐江湖的博客
10-03 2755
文章目录一：同步定时方式二：异步定时方式（1）不互锁（速度最快但可靠性最差）（2）半互锁（3）半互锁（可靠性最强但速度最慢） 一个总线周期通常会分为以下几个步骤 申请分配阶段： 由需要使用总线的主模块（主设备）提出申请，经总线仲裁机构决定将下一传输周期的总线使用权授予某一申请者，也可将此阶段细分为传输请求和总线仲裁两个阶段 寻址阶段： 获得使用权的主模块通过总线发出本次要访问的从模块的地址及有关命令，启动参与本次传输的从模块 传输阶段： 主模块和从模块进行数据交换，可单向或双向进行数据传送 结束阶段： 主模
ros2--timer--定时器
m0_60274660的博客
07-11 1619
这是ros2终端定时器的类型；
58.定时器&&异步 同步
qq_36367494的博客
03-03 1761
var fnArr = []; for (var i = 0; i &lt; 10; i ++) { fnArr[i] = function(){ return i }; } console.log( fnArr[3]() ) // 10 （闭包的题目）改造后var fnArr = [] for (var i = 0; i &lt; 10; i ++) { fnArr[i] ...
javascript中的定时器,同步异步,事件循环和任务队列等概念
MS6324_ZAKU的博客
08-11 849
定时器 用于设置延时 setTimeout/clearTimeout 指定某个函数或代码在多少毫秒之后执行 返回一个整数，表示定时器的编号，以后可以用来取消这个定时器 function sayHello(){ console.log('hello')} let timer1 = setTimeout(sayHello,1000) clearTimeout(timer1) let timer2 = setTimeout(()=>{ console.log('helloworld')},2000)
JS复习-08-定时器、同步异步
qq_36158581的博客
03-31 271
定时器 单线程 + 代码从上到下的执行 + 一行一行的执行, 同时只能做一个事情 + 例子: 一个厕所, 只有一个坑 同步异步 + JS 是单线程同步代码机制 => 当你写一个死循环的时候, 后面的代码就全都不执行了 + WEBAPI 给我们提供了一个队列的机制 => 用来模拟多线程 => 准备了一个队列 => 我们叫做单线程异步 + 异步: => 不会立即执行
JS 定时器（异步/同步）
tigerl2008的专栏
05-22 4700
关于setInterval(),setTimeout()使用： 在Web开发中，肯定会用到轮询，也即不停地以某个时间值去执行你想要执行的Function，也许你还想传参数，可是你会传吗？当你看到这两个方法只接受两个参数后，也许你就真的不知道应该怎么传额外的自己的参数了，这里直接看代码，很简洁、方便、易用的代码： [code="java"] Clear Timer ...
JS---定时器
最新发布
zyt0502的博客
08-20 2420
本篇主要是针对定时器设置和移除方法的介绍以及倒计时案例的介绍
揭秘JavaScript单线程定时器机制与异步处理
深入探寻javascript定时器 JavaScript作为一种单线程编程语言，其设计初衷是为了在浏览器环境中提供流畅的用户交互体验。由于其核心特性是单线程，这意味着所有的代码执行都必须按照特定的顺序进行，避免了复杂的...
【BOM】JavaScript-定时器-执行机制-location-navigator-history
YK菌的博客
01-06 410
文章目录1. BOM概述1.1 什么是 BOMDOMBOM1.2 BOM 的构成2. window对象的常见事件2.1 窗口加载事件2.2 调整窗口大小事件3. 定时器3.1 两种定时器3.2 setTimeout() 定时器3.3 停止 setTimeout() 定时器3.4 setInterval() 定时器3.5 停止 setInterval() 定时器3.6 this4. JS执行机制4.1 JS 是单线程4.2 问题4.3 同步和异步同步异步同步任务异步任务4.4 JS 执行机制5. locati
js代码-定时器的问题和解决方法
07-16
本文将深入探讨JavaScript定时器的常见问题及其解决方法。 ### 1. setTimeout 和 setInterval 在JavaScript中，`setTimeout`和`setInterval`是两个主要的定时器函数。 **setTimeout**: 这个函数用于在指定的毫秒...
js 怎样把定时器弄成同步的
LEI20012000的博客
05-07 3560
最近遇到一个问题， 定时器每隔1秒发一次请求，要求本次请求成功后才能发下一次请求，需要把定时器弄成同步的至于怎么弄成同步的，真是一把心酸泪呀直接贴代码吧 ``` <div style="height: 100px;width: 200px;float: right;"> 　　<button id="btn">Clear Timer</button&...
前端的那些事--定时器的异步过程
qq_42201141的博客
06-02 424
话不多说题目入手： setTimeout(function(){ console.log(1); },0) console.log(2); 上面这一道题目测试两个语句的输出顺序，有基础的同学估计很快就得出答案，2 1，那么入门的同学就好奇了，js不是按顺序一步一步执行吗，这里就且罢听我道说。 浏览器的工作原理 名称 作用 进程 cpu资源分配的最小单位 线程 cpu调度的最小单位 就是说，进程包括线程，一个进程包含多个线程，浏览器是多进程： 进程名称 作用 Bro
单线程和异步-定时器
liouswll的博客
06-12 1004
Js作为浏览器的脚本语言，其最根本的作用是实现用户与浏览器的交互行为，操作DOM决定它是单线程。例如：当一个用户要删除一个A，同时又要向A中添加内容，浏览器该以哪个线程为准。同步任务：只有前一个任务执行完成后，才可执行下一个任务，在主线程中异步任务：这个队列的所有任务都是不进入主线程执行，而是被浏览提供的线程执行，当执行完毕后就会产生一个回调函数，并且通知主线程，在主线程执行完当前所执行的任务后，...
boost库学习随记六：使用同步定时器、异步定时器、bind、成员函数回调处理、多线程的同步处理示例等
创造神话,实现梦想!
05-13 8662
一、使用同步定时器 这个示例程序通过展示如何在一个定时器执行一个阻塞等待介绍ASIO。 
async await结合定时器，将异步变成同步
cui_hope的博客
11-08 545
异步变同步
js作业之定时器本地同步显示时间
博客
03-05 527
两种方式： 效果： 第一种： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;本地定时器&lt;/title&gt; &lt;style type="text/javascript"&gt; &am
setTimeout定时器的异步及let循环中的同步异步问题 个人理解笔记
weixin_13107613013的博客
07-05 2478
新手个人理解  如有误解   敬请各位前辈评论指出 谢谢例1： for循环setTimeout定时器：for(var i = 1 ; i &lt;= 5; i++){ (function(){ setTimeout(function timer(){ console.log(i); },1000*i); })();}上述代码预期分别输出 1  2  3  4  5   但是实际输出 6  6 ...
广州蓝景技术——你真的了解同步和异步吗？
qq 2903359018博客
11-05 416
你真的了解同步和异步吗？ 最近发现挺多人在学习js的时候，比较难理解同步和异步的；特别在刚学习到定时器时，我们设置定时器延迟执行的时间，JS真的会准确按照这个时间间隔来执行吗？ 下面我们就从定时器开始慢慢聊一下这个话题。 首先要明确两点： 1.JS 执行机制是单线程。 2.JS的Event loop是JS的执行机制，深入了解Event loop，就等于深入了解JS引擎的执行。 单线程执行带来什么...
asio剖析（三）_添加任务-异步定时器剖析
weijianjain的博客
03-24 637
asio异步定时器进行剖析
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值