JavaScript起步（二十二-BOM二）| 一起学系列

来自小星星的你
92 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

  • 函数节流

    • 背景：在轮播图切换时，用户经常会快速点击好几次切换按钮，使得加载动画还未播放完成就被切换 image.png

  • 定时器（异步语句）

    • 定时器是window对象的一个方法，相当于定时闹钟，每个固定的时间响一次

    • 语法：window.setInterval(func, interval);

    • 第一个参数：每次执行的函数，可以是匿名函数定义，或者是一个匿名函数的引用，注意不要加（）

    • 第二个参数：时间间隔，以毫秒计数，1000毫秒等于1秒

    • 功能：每隔一个指定的事件，周期性的执行一个函数

    • 程序执行到定时器代码部分就相当于开启了一个定时器，不需要进行其他的打开操作；第一次执行函数时，是在第一个时间间隔之后

  • 清除定时器

    • 语法：window.clearInterval(timer);

    • 参数：指定的定时器变量名引用

    • 功能：清除指定的定时器

    • 注意：清除的定时器需要在定义时存储到一个变量中，便于后期清除调用

  • 简单运动

    • 原理：是一种视觉暂留效果，只要元素变化过程够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留的时间是0.1-0.4秒之间

    • 制作方法：通过定时器，实现每隔一个极短的时间（50-100毫秒左右），执行函数，函数内部让运动的属性值发生变化

    • 提高运动速度的方法：

      1.缩短时间间隔，增加了每秒移动的次数

      2.加大步长，让每一次走的步长增加

      减慢运动速度的方法相反

      实际制作过程中，推荐50-100毫秒，浏览器性能比较合适

 

  • 清除定时器出现的问题

    • 问题1：将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击情况：多次点击开始，会造成加速（每次点击都会在内存中新执行一段定时器代码，而之前的定时器代码依然在执行）；多次点击开始，不能再停止（给定时器设置的全局变量，每次点击按钮，该变量会存储当前点击的事件，此时再点清除的时候，只能停止当前的定时器，之前的依旧在执行） image.png 解决方法：

      • 设表先关：每次开启新的定时器之前，都清除前面的定时器

      • 问题2：需求：要求元素走到指定位置停止，例如让元素停止在500px的位置。问题：如果步长设置的不合理，停止的位置可能不是正好的500px处。

      • 解决方法：拉终停表：

        在定时器内部每次都要判断是否走到了终点，要不要停止定时器；如果走到或超过了终点，强行拉到终点，并停止定时器 image.png

      • 问题3：需求：在规定时间内让元素走到规定的结束位置，时间间隔可以更改。例如：让元素在2秒钟内，left属性从0走到500px

      • 解决方法：布标整除：

        总距离=步长*次数。时间间隔自定义，总时长固定。求出总次数=总时间/时间间隔。定义计数器变量，每执行一次定时器函数增加计数1，直到执行达到总次数，停止定时器 image.png

avatar
文章
阅读
粉丝