前端学习day40&day41：10-JS基础之定时器

最新推荐文章于 2024-06-14 15:02:13 发布

ysccsyysc

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量99

点赞数

分类专栏： JavaScript 文章标签： js javascript 前端

本文链接：https://blog.csdn.net/ysccsyysc/article/details/118642492

版权

JavaScript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.定时器

⑴setTimeout()：用来指定某个函数或字符串在指定的毫秒数之后执行且只执行一次

第一个参数是接收的回调函数，第二个参数是定时器的延迟时间，后面还可以接收回调函数的参数

⑵clearTimeout()：清除定时器

/*setTimeout() 有两个参数
	1.执行体 注意:函数传递参数可以把实参放在时间参数的后面(不兼容IE9及以下)
	2.时间 即多久执行*/
let a = 0;
let fun = () => {
    a++;
    console.log(a);
    setTimeout(fun, 1000);
}
setTimeout(fun, 1000)

//clearTimeout() //参数是定时器的名称
let timer = 0;
let a = 0;
let fun = () => {
    a++;
    console.log(a);
    timer = setTimeout(fun, 1000);
}
fun();

document.onclick = () => {
    console.log("定时器停止了");
    clearTimeout(timer);
}

⑶setInterval()：用来指定某个函数或字符串在指定的毫秒数之后执行并能够无限循环 ps: interval [ˈɪntəvl] 间隔;(时间上的)间隙;间歇;

⑷clearlnterval()：清除定时器

//传递参数是一样的结构
let timer = setInterval(function(){
    console.log(1);
},1000);
document.onclick = () => {
    console.log("定时器停止了");
    clearInterval(timer);
}

⑸requestAnimationFrame()：浏览器专门为动画提供的API，浏览器会自动优化方法的调用。页面不是激活的状态下动画暂停，有效节省CPU开销。用法与setTimeout相似只是不需要设置时间间隔

⑹cancelAnimationFrame()：取消请求动画帧

//复合动画帧的计时器,使得动画更流畅,也只是执行一次
let timer = 0;
let a = 0;
function fun(){
    a++;
    console.log(a);
    timer = requestAnimationFrame(fun);
}
fun();
document.onclick = () => {
    console.log("定时器停止了");
    cancelAnimationFrame(timer);
}

2.其他注意事项

定时器在定义时默认就会存在一个编号(从阿拉伯数字1开始往后排)，编号的编排依据是定时器定义的顺序，而不是执行的先后顺序。

通常不通过编号去清除定时器，一般是在定义时给定定时器一个名字。

解构赋值：

let [a, b] = [1, 2]
console.log(a,b);  // 1 2

let {name:c,age:d} = {name:"ysc",age:'21'}
console.log(c,d); // ysc 21

let name = "ysc";
    let age = 18;
    let obj = {
      name,
      age
    }
    console.log(obj); // {name: "ysc", age: 18}

let {name, age} = {name:"ysc", age:'21'}
console.log(name, age); // ysc 21

let {PI, abs} = Math
console.log(PI, abs); // 3.141592653589793 ƒ abs() { [native code] }

扩展运算符（...）：可以理解为把数组项一个一个拿出来

// 快速复制一个数组
let arr = [1, 2, 3];
let arr1 = [...arr];
console.log(arr1); // [1, 2, 3]

// 接收剩余参数
function fn (...rest){
       console.log(rest);
     }
fn(1, 2, 3, 4); // [1, 2, 3, 4]

// 把arr里的每一项都作为实参传入函数里
let arr = [1, 2, 3, 4];
     function fn(a, b, c, d){
       console.log(a + b + c + d);
     }
     fn(...arr); // 10

// 拆分字符串项，把字符串快速变成数组
let str = "12345";
    let a = [...str];
    console.log(a); // ["1", "2", "3", "4", "5"]

// 将类数组转为数组，即...可以操作类数组
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    let item = document.querySelectorAll('ul li');
    console.log(item); // NodeList(3) [li, li, li];
    let arr = [...item];
    console.log(arr); // [li, li, li]
  </script>
</body>

ysccsyysc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习day40&day41：10-JS基础之定时器

定时器1.setTimeout()用来指定某个函数或字符串在指定的毫秒数之后执行只执行一次clearTimeout()清除定时器/*setTimeout() 有两个参数 1.执行体注意:函数传递参数可以把实参放在时间参数的后面(不兼容IE9及以下) 2.时间多久执行*/let a=0let fun =()=>{ a++ console.log(a) setTimeout(fun,1000)}setTimeout(fun,1000)//clear
复制链接

扫一扫