簡體   English   中英

Javascript-無限滾動循環

[英]Javascript - Infinite scroll loop

短篇故事 :

我想解析一個具有無限滾動的網站我不想實現無限滾動 因此,我想創建一個腳本,該腳本從瀏覽器控制台自動滾動頁面,等待數據出現,然后重復直到結束。


很長的故事 :

我正在嘗試使用JavaScript控制台向下滾動到我的瀏覽器。 當我們滾動到底部時,將進行Ajax調用並填充<div>元素,因此我們必須等待這種情況發生,然后繼續執行過程。

我這里的主要問題是所有這些操作都做得太快了,它不會在恢復進程之前等待ajax完成。

舉一個具體的例子,當我進入AngelList作業頁面(需要登錄)並將其放在瀏覽器控制台中時:

function sleep(µs) {
     var end = performance.now() + µs/1000;
     while (end > performance.now()) ; // do nothing
}

var loading = true;

$(window).load(function () {
   loading = false;
}).ajaxStart(function () {
   loading = true;
}).ajaxComplete(function () {
   loading = false;
});

function waitAfterScroll() {
    if(loading === true) {
        console.log("Wait the Ajax to finish loading");
        setTimeout(waitAfterScroll, 1000);
        return;
    }

    console.log("Ajax DONE");
}

var X= 0;
while(X < 100){
  sleep(1000000);
  X = X + 10;
  console.log(X);
  window.scrollTo(0,document.body.scrollHeight);

  waitAfterScroll();
}

我有這個結果:

10
Wait the Ajax to finish loading
20
Wait the Ajax to finish loading
30
Wait the Ajax to finish loading
40
Wait the Ajax to finish loading
50
Wait the Ajax to finish loading
60
Wait the Ajax to finish loading
70
Wait the Ajax to finish loading
80
Wait the Ajax to finish loading
90
Wait the Ajax to finish loading
100
Wait the Ajax to finish loading
Wait the Ajax to finish loading
Ajax DONE

我想要的是:

10
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
20
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
30
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
40
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
50
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
60
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
70
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
80
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
90
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE
100
Wait the Ajax to finish loading // one or multiple times.....
Ajax DONE

我希望這很清楚。

換句話說,我希望能夠向下滾動,停止執行javascript或至少等待ajax完成加載,然后重復執行。

我很確定我誤解了您想要什么,但是無論如何。 為什么不使用Promises ?:

var promise = new Promise(function(resolve, reject) {
  var req = new XMLHttpRequest();
  req.open('GET', url);

  req.onload = function() {
    if (req.status == 200) {
       resolve(req.response);
  }
};
});

promise.then(function(result) {
  window.scrollTo(0,document.body.scrollHeight);
})

或者,您可以發出一個同步ajax請求來停止javascript執行。

 jQuery.ajax({
    url: "someurl.html",
    async: false, 
    success: function(html){ 
      window.scrollTo(0,document.body.scrollHeight);
    }
  });

但是,出於性能原因,我不建議這樣做。 相反,您可以:

// Start off with a promise that always resolves
var sequence = Promise.resolve();
arrayOfWebsiteContentUrls.forEach(function(url) {
  sequence = sequence.then(function() {
    return fetchTheContent(url);
  }).then(function(content) {
    addContent(content);                 
    window.scrollTo(0,document.body.scrollHeight);
  });
});

我摘自這篇關於Promises的出色文章的最后一部分。

拜托,讓我知道您是否有無法得到的東西。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM