setTimeout()和setInterval()的用法与区别

本文讨论如何正确使用setTimeout实现一次性的函数执行,以及如何避免因多次调用导致的setInterval无限循环,提供了清除定时器的策略,包括使用this.setTime变量和beforeDestroy钩子确保定时器在组件销毁时被清除。
摘要由CSDN通过智能技术生成

setTimeout(延时器),运行一次就停止

var t = setTimeout(() => {
         function()-----需要进行的函数
        }, 50)  -- 50毫秒后触发

setInterval(定时器),循环运行,直到被清除

var t = setInterval(async () => {
          const { data: res } = await getStat()
          this.setTimeV = res
          console.log(res)
          if (res == 11) {
            this.$router.push('/ipCompleteTest')
            clearInterval(t)    --------清除
          } else {
            function()
          }
        }, 5000)    ----每隔5000ms触发一次

setInterval清除有的时候可能失效:解决办法,把var t换成this.setTime

data(){
    return{
        setTime
    }
}


beforeDestroy: function() {
    this.$once('hook:beforeDestroy', () => {
      console.log('清除定时器')
      clearInterval(this.setTime)
    })
  }

有种无法停止的setInterval;大概原因是setInterval所在的function()被调用一次以上,修改只调用一次就好,cleaeInterval只清除一个

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
setInterval()和setTimeout()都是JavaScript中用来时执行函数的方法。 setInterval()方法会重复执行指的函数,直到被取消或页面被卸载。它接受一个函数作为参数,可以设置一个时间间隔,每隔这个时间间隔就会调用一次函数。例如,下面的代码会每隔1秒钟输出一次当前时间: ```javascript setInterval(function() { const now = new Date(); console.log(now.toLocaleTimeString()); }, 1000); ``` 这段代码会每隔1秒钟输出一次当前时间。 而setTimeout()方法是在指的毫秒数后执行一次函数或计算表达式。它也接受一个函数作为参数,并设置一个延迟时间。当延迟时间结束后,函数就会被调用。例如,下面的代码会在延迟3秒后输出一段文字: ```javascript setTimeout(function() { console.log('Hello, world!'); }, 3000); ``` 这段代码会在延迟3秒后输出"Hello, world!"。 总结起来,setInterval()会重复执行指的函数,而setTimeout()只执行一次。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [setInterval()和setTimeout()的用法](https://blog.csdn.net/weixin_46372993/article/details/129900212)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [JavascriptsetTimeOutsetInterval时器用法](https://download.csdn.net/download/weixin_38632763/14815932)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值