Javascript - 无限滚动循环

Question

短篇小说：

我想解析一个无限滚动的网站，我不想实现无限滚动。所以我想创建一个脚本，从浏览器控制台自动滚动页面等待数据出现然后重复直到结束。

---

长篇大论：

我正在尝试使用 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 完成加载，然后重复。

Answer 1

我很确定我误解了你想要的东西，但无论如何。为什么不使用 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);
  });
});

我从this excelent article on Promises 那里得到了最后一点。

如果有什么你不明白的，请告诉我。