JavaScript-迴圈Ajax的執行障礙(已解答)

javascript #javascript js忍之道 js 你懂javascript嗎？

Oo_花之舞__oO 2022-06-03 17:38:13 ‧ 1180 瀏覽

分享至

我目前在用Ajax來做爬蟲，功能是找到文章內的img、自動找到前一篇文章網址。
虛擬碼如下:

url="要抓的位址"

for 迴圈{
let req=new XMLHttpRequest;
req.open("get",url);
req.onload=function(){
圖片網址:用getelement找
前一篇網址:用DOMParser()找到前一篇文章網址
console.log(圖片網址)
url=前一篇網址
}
}

結果發現會出錯

會一直抓到同一篇文章的圖片.....

**
更新:我已經自己找到解答了XD**
不要用迴圈改用SetInterval就可以了這例子給各位參考

會發現解答是我意外逛文章看面試題經驗分享
他裡面寫面試官問:"遇到超大量資料迴圈卡頓怎麼辦" 然後那篇文的作者說不會
後來面試官給他答案:"拆開迴圈or用SetInterval"

我就想了一想雖然我不是超大量資料但也算是某種卡頓(?)
結果終於把我搞了三天東改西改卻還是失敗的地方修正完成....天壓~
多逛文有用XDDD

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2022-06-06 19:33:14 檢舉

認真來說，用 SetInterval 也不是很好。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2022-06-04 01:41:13

最佳解答

SetInterval 不是好的做法
時間間隔太長速度會太慢
時間間隔太短的話，又會造成重複請求
而且網路穩定度也會影響到回應的時間長短

下面方式提供參考

function requestOnePage(url) {
    let req = new XMLHttpRequest;
    req.open("get", url);
    req.onload = function () {
        //用 DOMParser 解析 req.responseText
        //取得想要的東西及下一頁的網址
        let nextUrl = '下一篇網址';

        //如果還有下一頁才繼續取得，否則程式會中斷
        if (nextUrl !== null) {
            requestOnePage(nextUrl);
        }
    }
    req.send();
}
requestOnePage('第一頁網址');

PS. 其他還有 Promise、async function 等方式可以處理非同步，也建議看一下

另外關於「超大量資料迴圈卡頓」，如果是跑運算的話，web worker 是個好選擇，這會用其他執行緒運算不會影響到畫面操作。