JavaScript定时器

Posted 2022-12-10 wangshouren

常用定时器

• setTimeout(function,interval):执行一次
• setInterval(function,interval):执行多次

function:到达时间后执行的方法，设定时不执行

interval：时间因子（需要等到的时间 MS）

清除定时器

clearTimeout / clearInterval：这两个方法中的任何一个都可以清除用任何方法创建的定时器。设置定时器会有一个返回值，这个值是一个数字，属于定时器的编号，代表当前是第几个定时器（不管是基于setTimeout还是setInterval创建定时器，这个编号会累加）

JS中的同步编程和异步编程

• 同步编程：任务是按照顺序依次处理，当前这件事没有彻底做完，下一件事是执行不了的
• 异步编程：当前这件事没有彻底做完，需要等待一段时间才能继续处理，此时我们不等，继续执行下面的任务，当后面的任务完成后，再去把没有彻底完成的事情完成

JS中的异步编程

• 所有的事件绑定都是异步编程 xxx.onclick=function()

• 所有的定时器都是异步编程 setTimeout(function(),1000)

• AJAX中一般都使用异步编程处理

• 回调函数也算是异步编程

  ...

//=>定时器设定一个时间，到达时间后不一定执行（如果当前还有其它的同步任务正在处理，那么到时间了也得等着）
let n = 0;
setTimeout(() => 
    console.log(++n);
, 1000);
console.log(n);//=>0
while(1===1)
    //=>死循环

浏览器是如何规划同步异步机制的

• 浏览器是多线程的，JS是单线程的（浏览器只给JS执行分配一个线程）：单线程的特点就是一次只能处理一件事情
  进程：每一个应用程序都可以理解为一个进程（浏览器打开一个页面，就相当于开辟一个进程），在一个程序中（进程中）我们经常会同时干很多事情，此时我们可以分配多个线程去同时完成多项任务
• JS在单线程中实现异步的机制，主要依赖于浏览器的任务队列完成的。浏览器中有两个任务队列（主任务队列、等待任务队列）

1.在主任务队列自上而下执行的时候，如果遇到一个异步操作任务，没有立即执行，而是把它放到等待任务队列中排队

2.当主任务队列完成后才会到等待队列中进行查找（主任务队列完不成，不管等待任务队列中是否有到达时间的，都不处理，继续等待主任务队列完成，因为js是单线程的，一次只能处理一件事情）

3.等待任务队列中谁先到条件了（如果有很多都达到条件了谁先达到的，就先处理谁），就把这个任务重新放到主任务队列中去执行，把这个任务执行完，再去等待队列中查找