Js BOM中用定时器实现简单运动会遇到的一些小问题及解决

• 简单运动

  • 简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留的时间0.1~0.4 s
  • 可以通过定时器，实现每隔一个极短时间（50~100毫秒左右），执行函数，函数内部让运动的属性值发生变化

• 定时器常见问题1

  • 将定时器的开始和停止过程写在不同的事件函数内部，容易出现用户错误点击情况:

    简单运动的代码如下：

    
    
    image.png

• 定时器常见问题1
  • 将定时器的开始和停止过程写在不同的事件函数内部，容易出现用户错误点击情况:
  • 多次点击开始，会造成加速 ：(每一个定时器都是独立的，每点击一次，就相当于再＋10，造成加速)；
    多次点击开始，不能够停止 ：(清除定时器，清除的是当前最新的定时器，而前面设置的全局变量存储的定时器，在你每点击一次开始按钮，就会改变其指向，指向最新的定时器，所以清除定时器，只能清除当前最新的定时器。而前面的那些点击生成的定时器没有办法引用到，也就没有办法再去清除了）；
  • 解决方法：设表先关，每次开启新定时器之前，先清除一次前面的定时器,这样就会永远保留当前最新的定时器。

• 定时器常见问题2

  • 要求让元素走到指定位置停止，如果步长设置不合理，停止的位置可能就不是指定位置。

  • 解决方法：拉钟停表，在定时器内部每次都要判断是否走到了终点，要不要停止定时器；

    如果走到或超过了终点，强行拉到终点，并停止定时器

• 定时器常见问题3

  • 要求规定时间内让元素走到规定的结束位置，时间间隔可以更改

  • 解决方法：步标整除。

    总距离 = 步长 * 次数；

    时间间隔自定义，总时长固定；

    求出总次数 = 总时间 / 时间间隔

    定义计数器变量，每执行一次定时器函数加1，直到执行达到总次数，停止定时器

  • 如：3秒，让div从100px走到700px