vue定时器 setInterval 应用

作者: 杨康他兄弟 | 来源:发表于2019-11-21 20:13 被阅读0次

2018-01-18
vue定时器 setInterval 应用
JS定时器
js date
js date对象和定时器
定时器
js定时器
setTimeout和setInterval深入理解
客户端的JavaScript（二）
定时器

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

提示： 1000 毫秒= 1 秒。

提示： 如果你只想执行一次可以使用 setTimeout() 方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/vue.min.js" ></script>
        <title>定时器</title>
    </head>
    <body>
        <div id = "app">
            <h1 v-text="msg"></h1>
            <input type="button" value="开始" @click="lamp"/>
            <input type="button" value="停止" @click="stop"/>
        </div>
        
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'fuck world !',
                    intervalId:null
                },
                methods:{
                    lamp(){
                        if(this.intervalId != null){
                           //如果intervalId 不为空，说明还未点击停止按钮，此时不进行定时器操作
                            return
                        }
                        this.intervalId = setInterval(()=>{
                        var start = this.msg.substring(0, 1)
                        var end = this.msg.substring(1)
                        this.msg = end + start}, 
                        400)
                    },
                    stop(){
                        clearInterval(this.intervalId)
                        this.intervalId = null
                    }
                }
            })
        </script>
    </body>
</html>