Javascript - 无限滚动循环

Question

Javascript - 无限滚动循环

javascriptjqueryajaxscrollinfinite-scroll

4

简短故事：

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

长篇故事：

我试图使用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

What I would like is :

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加载完成，然后重复执行。

- ZazOufUmI

快速的谷歌搜索可以找到很多例子。这里有一个：http://phppot.com/jquery/load-data-dynamically-on-page-scroll-using-jquery-ajax-and-php/ - Darkrum

可能是infinite-scroll jquery plugin的重复问题。 - Alex Filatov

谢谢@AlexFilatov，但不完全是这样。我想解析一个有无限滚动的网站，而不是实现无限滚动。因此，我想通过脚本自动滚动页面。 - ZazOufUmI

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Federico · Accepted Answer

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

我从这篇关于Promise的优秀文章中摘取了最后一部分。

如果您有任何疑问，请告诉我。