javascript-定时器

小结

一次性定时器的设置。设置一个一次性的定时器，让他在5秒钟后执行fly函数
setTimeout(fly,5000)
格式：setTimeout（函数名，豪秒数）

一次性定时器的取消。有一个一次性定时器t，请取消他的执行
clearTimeout(t)
格式：clearTimeout（定时器）
 

 

定时器

定时触发功能

 

 

 

 

一次性定时器

setTimeout

只执行一次的定时器

 

用法：

setTimeout（函数名，豪秒数）

 

例子：

两秒后触发一次run函数

 

<script>
    function run(){
        alert('runrun')
    }

    t = setTimeout(run, 2000)
</script>

 

setTimeout的返回值

经过测试，发现它只是一个数字，类型为number

<script>
    function run(){
        alert('runrun')
    }

    t = setTimeout(run, 2000)
    alert(typeof t)
    alert(t)
</script>

 

 

 

 

解除定时器

clearTimeout（定时器）

功能，将之前生成的定时器取消掉

 

将定义好的定时器取消掉

本来应该两秒后执行的函数，不会再执行了

<script>
    function run(){
        alert('runrun')
    }

    t = setTimeout(run, 2000)
    clearTimeout(t)
</script>

 

 

 

 

反复执行的定时器

setInterval（函数名，豪秒数）

 

 

 

 

关闭反复执行的定时器

clearInterval（定时器）

 

 

 

 

函数名位置可以用匿名函数代替

定时器中参数为函数名的地方

可以使用匿名函数来代替

 

 

 

 

案例：向右移动的盒子

让一个DIV盒子向右边移动

 

例子通过定位来移动

同样的，可以通过margin来设置移动

 

 

 

 

优化：盒子向右移动到一定阶段就停下来

 

向右边移动到一定阶段，就停下来

 

 

 

 

 

 

 

强化：左右移动的盒子

让盒子有边界判断

向右移动到一定阶段时

会改变方向，向左移动

碰到左边的边界时

再向右边移动

如此反复

 

 

 

 

 

 

案例：无缝滚动

 

让下面的图片滚动起来

 

向左边滚动时会发生这样的现象

 

解决方案一：

参考飞机大战案例的背景移动的效果

 

解决方案二：

做一张超长的图，图片是原来的两倍长度

先左方向移动

当最右边的要露陷时

立马重置一下

让图片回归到原始位置

只要速度够快

用户看不见反应

 

代码如下

 

 

 

 

 

 

强化：按钮的功能生效

当点击左边的按钮时，让图片向左边移

点击右图的按钮时，图片向右边移

 

 

通过改变速度来改变方向

当前代码，获得按钮对象

 

给按钮对象的点击事件

添加速度的修改

 

 

向右移动时，左边会漏陷

解决办法，边界判断

 

 

 

 

强化：鼠标悬停时停止滑动

 

思路，鼠标停上去后，让速度为0

鼠标移开后，让速度恢复

注，速度设置为0时，要存一下之前的速度值

用于后面的恢复

全局变量设置一个nowspeed 

 

代码如下