前端 延时器 setTimeout 和定时器 setInterval 注意事项

不管是vue还是react项目中，我们多多少少都会用到延时器和定时器，我目前项目中延时器用的最多，定时器几乎不用

理解概念：
延时器：setTimeout ， 顾名思义延时就是不会立即执行会等到设置的时间到了之后立即执行，也就是说只有满足条件的时候才会执行且只会执行一次。

var Date1 = setTimeout(function() {
  console.log(new Date())
},1000)  // 1秒后执行打印功能

定时器：setInterval，字面意思就是定时多久执行，也就是说会执行N多次，而且如果没有清除定时器会执行的越来越来，因为是叠加的。

var Date2 = window.setInterval(function() {
  console.log(new Date())
},1000) // 间隔1秒就打印
window.clearInterval(Date2)  // 一定要清除定时器

项目中假设我们请求超时的时候要用延时器
我们导出写好的封装的延时器方法：

export function timeoutPromise(timeout, controller) { // 第一个参数代表超时，第二个代表控制器
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Response('timeout', { status: 521, statusText: 'timeout ' }));
      //超时自动关闭当前请求
      controller.abort();
    }, timeout);
  });
}

我们在需要设置页面引用我们的封装延时器
// 假设我们进行了一个请求
let request = (url, option) => {
  controller = new AbortController();
  let signal = controller.signal; // 发号器是要自己在前边设置的，我这里没有写
  return Promise.race([
    timeoutPromise(timeout, controller),
    Fetch(url, option, signal)
  ])
    .then((resp: any) => {
      // console.log("requests",resp);
      //在这里判断请求超时
      if (resp.status === 521) {
        message.error('请求超时');
        return {
          success: false,
          status: 521,
          msg: '请求超时'
        };
      }
      //令牌过期跳转到登陆页面
      if (resp?.code === 9913) {
        // 延时效果，为了能够看到抛出的提示
        setTimeout(() => {
          localStorage.removeItem('Authorization');
          return (window.location.href = `/login?redirectUrl=${window.location.pathname}`);
        }, 1000);
      }
      return resp;
    })
    .catch((error) => {
      return {
        success: false,
        status: 521,
        msg: '系统错误，请联系管理员'
      };
    });
};

最后

以上就是霸气奇异果为你收集整理的前端 延时器 setTimeout 和定时器 setInterval 注意事项的全部内容，希望文章能够帮你解决前端 延时器 setTimeout 和定时器 setInterval 注意事项所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。