定时器和延时器

发表于 更新于 分类于

定时器

  1. setInterval() 函数可以重复调用一个函数，在每次调用之间具有固定的时间间隔
    • 第一个参数是函数
    • 第二个参数是间隔时间，以毫秒为单位，1000毫秒是1秒
    • 函数可以接受3，4….个参数，它们将按照顺序传入函数
    • 具名函数也可以传入serInterval （有名称的函数），但是不能加上括号，不加括号说明传入是 函数，加括号说明是传入执行体（会立即执行，起不到定时执行的效果）

清除定时器

  1. clearInterval() 函数可以清除定时器，入参传入定时器名称

延时器

  1. setTimeout() 函数可以设置一个延时器，当指定时间到了之后，会执行函数一次，不会重复执行
  2. clearTimeout() 函数可以清除延时器

初步认识异步语句

  1. setInterval 和 setTimeout 是两个异步语句
  2. 异步（asynchronous）: 不会阻塞CPU继续执行其它语句，当异步完成时，会执行“回调函数”（callback）

使用定时器实现动画

  1. 使用定时器实现动画较为不便：
    • 1、不方便根据动画总时间计算步长
    • 2、运动方向要设置正负
    • 3、多种运动进行叠加较为困难（比如一个放下一边移动一边变为圆形）

JS和CSS3结合实现动画

  1. CSS3的transition过渡属性可以实现动画
  2. JavaScript可以使用css3的transtion属性轻松实现元素动画
  3. JS和CSS3结合实现动画规避了定时器制作动画的缺点

函数节流

  1. 一个函数执行一次后，只有大于设定的执行周期后才允许执行第二次
  2. 函数节流非常容易实现，只需要借助setTimeout()延时器