本篇內(nèi)容主要講解“如何解決多個(gè)Tab頁(yè)點(diǎn)擊切換功能所導(dǎo)致的問(wèn)題”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何解決多個(gè)Tab頁(yè)點(diǎn)擊切換功能所導(dǎo)致的問(wèn)題”吧!

創(chuàng)新互聯(lián)公司專(zhuān)注于圖木舒克網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供圖木舒克營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，圖木舒克網(wǎng)站制作、圖木舒克網(wǎng)頁(yè)設(shè)計(jì)、圖木舒克網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù)，打造圖木舒克網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供圖木舒克網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

大家肯定遇到過(guò)這樣類(lèi)似的場(chǎng)景：多個(gè) Tab 頁(yè)點(diǎn)擊切換功能，如果用戶(hù)點(diǎn)擊頻繁，很可能會(huì)出現(xiàn)當(dāng)前頁(yè)面顯示別的頁(yè)面的數(shù)據(jù)。

因?yàn)槊總€(gè)接口返回信息的時(shí)間是不同的，你不能保證先請(qǐng)求的一定最先返回?cái)?shù)據(jù)，那么就很可能會(huì)出現(xiàn)停留在頁(yè)面一卻出現(xiàn)別的頁(yè)面的數(shù)據(jù)的情況。這種異步的情況術(shù)語(yǔ)稱(chēng)之為異步競(jìng)態(tài)。

這時(shí)肯定有讀者會(huì)說(shuō)了，這還不簡(jiǎn)單，我能給你輕松想出好幾個(gè)解決辦法。

節(jié)流、防抖、加 Loading!

這些做法固然能解決問(wèn)題，但是都治標(biāo)不治本，而且還影響了用戶(hù)體驗(yàn)，其實(shí)還有種辦法能夠完美解決問(wèn)題：取消請(qǐng)求。

當(dāng)然了這個(gè)取消請(qǐng)求它只是不繼續(xù)處理接口后續(xù)的響應(yīng)了，并不是真的把請(qǐng)求給取消了。畢竟請(qǐng)求如果已經(jīng)發(fā)出去的話，我們也不能順著網(wǎng)線把它追回來(lái)。

我們這邊以 axios 為例來(lái)看看怎么取消請(qǐng)求：

const CancelToken = axios.CancelToken; const source = CancelToken.source();  axios.get('/user/12345', {   cancelToken: source.token }).catch(function (thrown) {   if (axios.isCancel(thrown)) {     console.log('Request canceled', thrown.message);   } else {     // handle error   } });  axios.post('/user/12345', {   name: 'new name' }, {   cancelToken: source.token })  // cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.');

用法還是挺簡(jiǎn)單的，對(duì)于可能會(huì)出現(xiàn)異步競(jìng)態(tài)的情況下大家可以采用這個(gè)方法來(lái)解決。簡(jiǎn)單好用，還不會(huì)影響用戶(hù)體驗(yàn)，封裝下代碼就能用起來(lái)了。

到此，相信大家對(duì)“如何解決多個(gè)Tab頁(yè)點(diǎn)擊切換功能所導(dǎo)致的問(wèn)題”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！