Wie man javascript-scroll prüft (und killt), wenn Unterseite der Webseite erreicht wird

Question

Ich habe in Python seit ein paar Jahren gearbeitet und habe kürzlich angefangen, nach Javascript (nicht jQuery oder Abhängigkeiten, einfach nur Javascript) zu suchen Browser-Automatisierungsaufgaben.

Scrollen von Websites mit Lazy Load (wie eine Facebook-Seite, eine Twitter-Seite oder sogar die Wallmart-Website) in Python ist einfach mit FX Selen.

In Python kann eine grobe 'n' schmutzige Lösung ein Höhen-Check sein und aus einer while-Schleife ausbrechen, wenn die Höhe nicht mehr ansteigt. Wie so:

check_height = driver.execute_script("return document.body.scrollHeight;") 
while True: 
    browser.execute_script("window.scrollTo(0, document.body.scrollHeight);") 
    time.sleep(2) 
    height = driver.execute_script("return document.body.scrollHeight;") 
    if height == check_height: 
     break 
    check_height = height 

So, jetzt versuche ich die gleiche Sache in Javascript mit der Chrome-Konsole zu erreichen. Bisher ein Arbeits Code sieht wie folgt aus:

var scrollToBottom = function() { 
    window.scrollTo(0, document.body.scrollHeight); 
    } 
var sleep = 1000; 
var kill_ID = setInterval(scrollToBottom, sleep); 

Die setInterval löst eine Schleife, die für immer geht weiter - mit einem zweiten der Schlafzeit zwischen jedem Aufruf scrollToBottom. Und ich kann dann - manuell - töten sie, wenn nicht mehr Inhalt durch die Ausgabe geladen wird:

window.clearInterval(kill_ID); 

Dies ist offensichtlich nicht der beste Weg, um dies zu realisieren. Es muss also einen besseren Weg geben, die Aufgabe zu erledigen, ohne den Scroll-Vorgang manuell beenden zu müssen.

Aber die Python-Logik scheint nicht für mich in Javascript zu arbeiten. Jeder, der mir ein paar Hinweise geben wird, wie das zu erreichen ist - ich nehme an - Grundaufgabe? Danke im Voraus.

Update: Da es offenbar keine einfachen Korrekturen für diesen, ging ich mit einer Low-Tech-Lösung und fügte eine eventlistener, dass das Scrollen tötet, wenn ich mit der Maus klicken (löst die clearInterval).

So ein zusätzlicher Code-Snippet für diese zu arbeiten - fx als Bookmarklet - müssten nur sein:

window.addEventListener('click', function kill(){window.clearInterval(kill_ID)}) 

Danke für die Kommentare hilfreich, alle zusammen.

Answer 1

Ihr Ansatz ist korrekt und ich denke (und ich kann falsch liegen), es ist so gut wie Sie können, wenn Sie nicht async/await Ansätze verwenden möchten.

Mit async/await Sie eine Schleife definieren, wie folgt aus:

async function toTheBottom() { 
    while (check if height has changed) { 
    window.scrollTo(0, document.body.scrollHeight); 
    await sleep(1000); 
    } 
} 

Wo schlafen könnte wie folgt definiert werden:

function sleep(ms) { 
    return new Promise((resolve, reject) => { 
    setTimeout(resolve, ms); 
    }); 
} 

Kompatibilität: https://caniuse.com/#feat=async-functions

Answer 2

Wenn ich Ihr Problem zu verstehen, Sie wollen etwas tun, wenn das Fenster scrollt, und dann darauf basierend tun etwas sonst.Sie sollen dies über eventListeners Lage zu tun:

window.addEventListener('scroll', event => { 
    // Do your checks to see if you need to 
    // do your work or not 
    if (doWork()) { 
    doSomethingElse() 
    } 
}) 

Here is a jsfiddle ein Beispiel, das ich denke, das tun, was sie bittet

Wenn Sie eine Abhängigkeit hinzufügen wollen, dies ein wenig leichter werden würde, zu tun:

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script> 
<script> 
    const { Observable } = Rx 

    const scrollStream = Observable.fromEvent(window, 'scroll') 

    const isTheScrollICareAboutSubscription = scrollStream 
    .filter(e => { 
     // return true or false if this is 
     // an event we care about 
     return doWork(e) 
    }) 
    .subscribe(doSomethingElse) 
</script>