定时器加案例

最新推荐文章于 2023-09-11 10:33:25 发布

孤影_ls

最新推荐文章于 2023-09-11 10:33:25 发布

阅读量201

点赞数

分类专栏： JS 文章标签： setTimeout 定时器 setInterval javascript

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/114242796

版权

JS 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

定时器加案例

定时器

1.setTimeout(函数，间隔时间，函数的实参)：他是一次性函数，到了规定的时间只会执行一次
2.setInterval(函数，间隔时间，函数的实参)：他是周期性函数，间隔一段时间只会执行一次
3.间隔时间的单位是毫秒
4.定时器的返回值是一个数字，代表当前定时器在页面中的位置（假如页面中有两个定时器，第一个定时器返回的值是1，第二个定时器的返回值是2）
5.clearInterval(定时器的返回值)
6.clearTimeout(定时器的返回值)
- 可以混着清定时器，不建议
7.浏览器的最小识别时间；谷歌5~6ms 火狐10~12 IE 13~15
8.当代码运行到定时器所在行时，浏览器会给当前定时器记录一个开始的时间；

setInterval(fn(2),间隔时间)
function fn(a) {
 return function code() {
}
}

定时器是个异步的任务

    // let a = 1;
    // setTimeout(function(){// 定时器是个异步的任务；
    //     a=10
    // },1000);
    // console.log(a);// 1

	// let num1 = setTimeout(function(){}, 1000);
    // let num2 = setInterval(()=>{},1000);
    // console.log(num1,num2);
    /* setTimeout((m)=>{
        console.log(m);
    },2000,100) */

    let num = null;
    let ss = setInterval(()=>{
        if(num===5){
            clearInterval(ss)   
        }
        console.log(2);//输出6次 走完才清空
    },2000)
    
   	//
   	let ss;
	btn.onclick = function () {
		clearInterval(ss);
		if (flg) {
			if (leftText.innerHTML !== "") {
				ss = setInterval(code, 10);//多次使用定时器，需要把返回值给到全局定义的变量
			}
		} else {
			if (Text.innerHTML !== "") {
				ss = setInterval(code, 10);
			}
		}
		flg = !flg;

	}

定时器运行

    当浏览器解析jS时，会先把所有的同步代码执行完，然后再执行异步；
    JS 是单线程： JS同一时间只能执行一行代码；
    浏览器是多线程
    线程是一个小的进程；
    异步： 定时器  ajax   事件（onload onclick ） promise  async await 

       1. 如果两个定时器都在for循环的上面，谁的时间小，先执行谁；如果时间相同
       2. 当同步代码执行完毕，会对异步任务进行比较，谁先到达执行时间，先执行谁；
       3. 当JS运行时，分为主任务队列和等待任务队列；主任务都是同步的，异步是等待任务队列；只要主任务队列执行完毕，才会执行等待任务队列

弹广告案例

<!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>弹广告</title>
    <style>
        *{margin: 0%;padding: 0%;}
        div{
            width: 700px;
            margin: 100px auto;
            position: relative;
            opacity: 0;/* display: none; */
            transition: all 1s ease;
        }
        img{
            display: block;
            width: 100%;
        }
        span{
            cursor: pointer;
            position:absolute;
            top: 0;
            right: 0;
            font-size: 30px;
            color: azure;
        }
    </style>
</head>
<body>
    <div id="box">
        <span id="btn">关闭</span>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2833557009,4081302457&fm=26&gp=0.jpg
        ">
    </div>
    <script>
        let box = document.getElementById('box')
        let btn = document.getElementById('btn')
        //给btn绑定点击事件，当点击的时候让整个div消失（控制的是透明度）
        btn.onclick = function(){
            box.style.opacity='0'//box.style.display='none'
        }
        //页面展示5秒钟之后定时器执行，让div显示（控制的是透明度）
        setTimeout(()=>{
            box.style.opacity='1'//box.style.display='block'
        },5000)
    </script>
</body>
</html>

跑马灯案例

<!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>跑马灯</title>
</head>

<body style="background: red">
    <script>
        let body = document.body;
        let num = null

        function fn() {
            num++
            if(num === 30){
                clearInterval(ss);
                console.log(22)
                body.style.background = 'white';
                return;
            }
            let color = body.style.background;
            switch (color) {
                case 'red':
                body.style.background = 'yellow';
                    break;
                case 'yellow':
                    body.style.background = 'pink';
                    break;
                case 'pink':
                    body.style.background = 'green';
                    break;
                case 'green':
                    body.style.background = 'orange';
                    break;
                default:
                 body.style.background = 'red';

            }
        }

        let ss = setInterval(fn, 100)
    </script>
</body>

</html>

孤影_ls

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
定时器加案例

定时器加案例定时器1.setTimeout(函数，间隔时间，函数的实参)：他是一次性函数，到了规定的时间只会执行一次2.setInterval(函数，间隔时间，函数的实参)：他是周期性函数，间隔一段时间只会执行一次3.间隔时间的单位是毫秒4.定时器的返回值是一个数字，代表当前定时器在页面中的位置（假如页面中有两个定时器，第一个定时器返回的值是1，第二个定时器的返回值是2）5.clearInterval(定时器的返回值)6.clearTimeout(定时器的返回值)可以混着清定时器，不建议
复制链接

扫一扫

专栏目录