繁体   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