setInterval只执行一次？

遇到的问题：setInterval函数只调用了一次？

// 实例化vue对象
    new Vue({
        el:"#vue-app",
        data:{
            name:"hello vue"
        },
        created() {
            setInterval(this.test(),1000)
        },
        methods: {
            test(name){
                console.log(new Date(), name)
            }
        },
    })

看setInterval文档：

这里的执行函数只是一个函数体内容，执行与否是与后面的millseconds有关，如果这里使用括号调用（如上述setInterval(this.test(),1000)）函数return undefined，所以没有要执行的函数，所以这里setInterval调用的函数不加括号setInterval(this.test,1000)（或者你可以这样写）

 new Vue({
        el:"#vue-app",
        data:{
            name:"hello vue"
        },
        created() {
            console.log('setInterval')
            setInterval(this.test(),1000)
        },
        methods: {
            test(name){
                console.log(new Date(), name)
                return test
            }
        },
    })

那我要说我还要加参数咧

看上图文档参数：

//setInterval(function, milliseconds, param1, param2, ...)
setInterval(this.test,1000, '7777')
//or 可以将test定义为全局函数
setInterval("test('444')",1000)
//or 直接写个函数
setInterval(() => {
 this.test('444')
},1000)

补充

慎用setInterva容易造成js setInterval堆积问题，如果要用一定记得window.clearInterval(定时器变量)

js setTimeout实现setInterval递归定时器

// js setTimeout实现setInterval递归定时器
    var count = 10, cancelPayTimeout = null
    var payObserver = function(time){
        --count
        if(count > 0){
            cancelPayTimeout = setTimeout(payObserver, time)
        }else{
            clearTimeout(cancelPayTimeout)
            alert('支付超时')
        }
    }