2016-09-08 7 views
4

Короткий рассказ:Javascript - Бесконечный цикл прокрутки

Я хочу разобрать сайт, который имеет бесконечный свиток на нем, я не хочу, чтобы реализовать бесконечный свиток. Поэтому я хочу создать сценарий, который автоматически прокручивает страницу из консоли браузера, ожидая появления данных, а затем повторяется до конца.


Длинная история:

Я пытаюсь прокрутить вниз бесконечный свиток с помощью Консоли 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, а затем повторить.

+0

Быстрый поиск в Google вызывает много примеров. Вот один http://phppot.com/jquery/load-data-dynamically-on-page-scroll-using-jquery-ajax-and-php/ – Darkrum

+0

Возможный дубликат [плагина jquery с бесконечным прокруткой] (http: // stackoverflow.com/questions/5059526/infinite-scroll-jquery-plugin) –

+0

Спасибо @AlexFilatov, но не совсем. Я хочу проанализировать веб-сайт с бесконечным прокруткой на нем, я не хочу реализовывать бесконечный прокрутки. Поэтому я хочу автоматически прокручивать страницу через скрипт. –

ответ

3

Я уверен, что неправильно понял, что вы хотели, но так или иначе. Почему не используют Обещания ?:

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); 
}) 

Или, вы можете сделать запрос на синхронный АЯКС, чтобы остановить выполнение 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.

Пожалуйста, дайте мне знать, если что-то не получается.

+0

Спасибо за ваш ответ. Я отредактировал свой пост, потому что я думаю, что раньше не было ясно. Я хочу проанализировать веб-сайт с бесконечным прокруткой на нем, я не хочу реализовывать бесконечный прокрутки. Поэтому я хочу создать сценарий, который автоматически прокручивает страницу из консоли браузера, ожидая появления данных, а затем повторяется до конца. –

+0

@ StéphaneJ А, я понял это сейчас, но вам нужно отображать сайт как есть (с помощью css и все), или вы просто хотите очистить его содержимое? Если это так, вы можете имитировать вызовы ajax, которые делает сайт. Позвольте мне знать, если это так, чтобы уточнить это. – Federico