js setInterval()和setTimeout()的用法

一、基础用法

1. setTimeout()

​​功能​​：延迟指定时间后执行一次函数或代码。
​​语法​​：

const timerId = setTimeout(callback, delay, arg1, arg2...);

• ​​参数​​：
  • callback：要执行的函数或代码字符串（不推荐字符串形式
  • delay：延迟时间（毫秒），默认最小值为 4ms
  • arg1, arg2...：传递给回调函数的额外参数（可选）

​​示例​​：

function greet(name) { console.log(`Hello, ${name}!`); } setTimeout(greet, 2000, "Alice"); // 2秒后输出 "Hello, Alice!"

2. setInterval()

​​功能​​：每隔指定时间重复执行函数或代码，直到被清除。
​​语法​​：

const intervalId = setInterval(callback, interval, arg1, arg2...);

• ​​参数​​：与 setTimeout 类似，但 interval 表示重复间隔时间。

​​示例​​：

let counter = 0; const intervalId = setInterval(() => { console.log(`Count: ${counter++}`); if (counter >= 5) clearInterval(intervalId); // 停止循环 }, 1000);

清除定时器​​

• ​​必要性​​：未清除的定时器可能导致内存泄漏或意外执行。

clearInterval() 方法的语法是：

clearInterval(intervalID);

    这里，intervalID 是 setInterval() 方法的返回值。

二、核心区别

 示例

async function monDone(deviceId, hour) {
  reset()
  loading.value = true
  let params = {
    'date': '',
    'deviceId': '',
    'hour': '',
  };
  params.date = proxy.moment(date.value).format("YYYY-MM-DD")
  params.deviceId = deviceId
  params.hour = hour

  let res = await getMonitorByDeviceMinute(params)
  monOneData.value = res.data
  switch (monOneData.value.minutes.length) {
    case 30:
      pageNum.value = 15
      break;
    case 60:
      pageNum.value = 20;
      break;
    case 12:
      pageNum.value = 12;
      break;
    default:
      pageNum.value = 10
  }
  loading.value = false
  visible.value = hour
  deviceItemId.value = deviceId
  
  // 清除已有定时器
  if (monInterval) {
    clearInterval(monInterval)
  }
  
  // 设置新的定时器，每分钟执行一次
  monInterval = setInterval(() => {
    getMonitorByDeviceMinute(params).then(res => {
      reset()
      monOneData.value = res.data
    
    })
  }, 60000)
}