前端菜鸡流水账日记 -- setTimeout定时器

中午好哇，一上午的时间过的真快，这都快要吃午饭啦，突击询问有想好吃什么吗？？？当然，这不是重点，重点是我今天要说的这个定时器，以及和他搭配的取消定时器，话不多说，开始我们的新内容

setTimeout都不陌生就是定时器，他可以这样用

  setTimeout(() => {
    dealData.forEach(e=>{
      if(aw(e).quan){
        p.planList.push({
          planid:aw(e).planId,
          quan:aw(e).quan,
          detai:aw(e).detai
        })
      }
  })

或者是

  setTimeout(()=>{
    policeFormRef.value.init()
  })

再或者

let timear = setTimeout(() => {
          resolve(true)
        }, 50);

等等等等很多用法，只要是可以用得到定时器的地方，功效还是很大的1000=1s哦，基本格式也简单就是setTimeout（（）） = 》{ }

说完了setTimeout这个定时器，跟他打配合的当然是清除定时器clearTimeout（），它 是JavaScript中的一个函数，用来取消由setTimeout设置的定时器

在Vue.js环境中使用此函数时，你可能会在以下场景见到它：

1. 组件卸载前清理资源：为了防止内存泄漏，在Vue组件的生命周期钩子beforeUnmount或unmounted中，可以调用clearTimeout来取消尚未执行的定时任务。

2. 表单验证、输入提示等交互控制：在用户交互过程中，如果需要根据特定条件启动一个定时器（比如显示提示信息一段时间后自动隐藏），那么在条件改变时（如用户输入、点击按钮等），可以通过clearTimeout来取消旧的定时器并重新设置，以保证UI行为的准确性

下边是一个例子：

<template>
  <button @click="startTimer">开始计时</button>
  <button @click="stopTimer">停止计时</button>
</template>

<script>
export default {
  setup() {
    let timerId = null;

    const startTimer = () => {
      timerId = setTimeout(() => {
        console.log('计时结束');
      }, 5000);
    };

    const stopTimer = () => {
      if (timerId) {
        clearTimeout(timerId);
        timerId = null;
        console.log('计时已停止');
      }
    };

    return {
      startTimer,
      stopTimer,
    };
  },
};
</script>

在这个例子中，当用户点击“开始计时”按钮时，会启动一个5秒后的计时任务；点击“停止计时”按钮，则会取消这个计时器。 

代码中使用到的像这样

    let timear = setTimeout(() => {
          clearTimeout(timear)
          resolve(true)
        }, 50);
      }

在内部，自己使用完自己消除，避免造成内存多余的占用，或者出现其他的bug

好啦，这就是这篇文章我要说的内容啦，下次见