定时器加案例

定时器加案例

定时器

  • 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>

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页