前端 延时器 setTimeout 和定时器 setInterval 注意事项 |
您所在的位置：网站首页 › 没有秒传按钮会怎么样 › 前端 延时器 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: '系统错误，请联系管理员' }; }); }; |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |