vue定时器的写法和setTimeout和setInterval的区别

0、前言介绍

setTimeout和setInterval都属于JS中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直循环下去。

function fun(){
  alert('hello');
}
  setTimeout(fun,1000);//参数是函数名
  setTimeout('fun()',1000);//参数是字符串
  setInterval(fun,1000);
  setInterval('fun()',1000);

不再单独再定义一个函数,直接将函数调用放在一个函数里面,可以使用函数名作为调用调用句柄

function fun(name){
  alert('hello'+' '+name);
}
setTimeout (function(){
  fun('Tom');
},1000);//参数是函数名

1、setTimeout实现的形式一

第一种情况:用this.fun调用方法,不能传参数,参数可以用data

mounted() {
    this.Load();
  },
  methods: {
    Load() {
      // setTimeout("this.myfun", 1000); //1秒后開始运行 ×
      // setTimeout("this.myfun()", 1000); //1秒后開始运行 ×
      // setTimeout(this.myfun("参数"), 3000); //1秒后開始运行 直接运行函数 ×

      setTimeout(this.myfun, 3000); //1秒后開始运行 √
    },
    myfun(obj) {
      console.log("进来了", obj);
    },
}

2、setTimeout实现的形式二

mounted() {
    this.Load();
  },
  methods: {
    Load() {
      // setTimeout("myfun", 1000); //1秒后開始运行 ×
      // setTimeout("myfun()", 1000); //1秒后開始运行 ×
      // setTimeout(myfun("参数"), 1000); //1秒后開始运行 直接运行函数 ×

      setTimeout(myfun, 1000); //1秒后開始运行 √

      function myfun(obj) {
        console.log('进来了',obj);
      }
    },
}

3、setTimeout实现的形式三

也可以使用我的这种直接传function函数和时间参数

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue.js中,你可以使用`setInterval`和`setTimeout`函数来执行定时任务。这两个函数允许你在指定的时间间隔或延迟后执行特定的代码。 1. `setInterval`函数用于创建一个定时重复执行的任务。它接受两个参数:要执行的函数和时间间隔(以毫秒为单位)。 ```javascript // 示例:每隔1秒输出一次日志 let intervalId = setInterval(() => { console.log("定时任务执行"); }, 1000); ``` 在Vue.js中,通常将`setInterval`函数与生命周期钩子函数一起使用,以便在组件挂载后开始定时任务,并在组件销毁前清除定时器。 ```javascript export default { data() { return { intervalId: null }; }, mounted() { this.intervalId = setInterval(() => { console.log("定时任务执行"); }, 1000); }, beforeDestroy() { clearInterval(this.intervalId); } }; ``` 2. `setTimeout`函数用于创建一个只执行一次的延迟任务。它接受两个参数:要执行的函数和延迟时间(以毫秒为单位)。 ```javascript // 示例:延迟2秒后输出一次日志 setTimeout(() => { console.log("延迟任务执行"); }, 2000); ``` 同样,在Vue.js中,可以将`setTimeout`函数与生命周期钩子函数一起使用,以在组件挂载后执行一次延迟任务。 ```javascript export default { mounted() { setTimeout(() => { console.log("延迟任务执行"); }, 2000); } }; ``` 请注意,在使用`setInterval`和`setTimeout`时,确保在适当的时候清除定时器,以避免内存泄漏和不必要的性能开销。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bst@微胖子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值