Javascript scroll: Wie führe ich die Funktion nur einmal mit der geringsten CPU-Auslastung aus?

Question

Ich habe eine einfache Website, die aus einer einzigen Seite besteht. Das Nutzungsverhalten wird über Piwik verfolgt. Aufgrund des Designs der Seite greifen Benutzer normalerweise auf das Scrollen durch, anstatt die Navigationsleiste zu verwenden und auf Links zu klicken, so dass Link-Tracking eine sehr informative Methode ist, um einen Einblick in die Nutzung der Website zu erhalten. Um das Benutzerverhalten zu verfolgen, habe ich eine js Funktion „Blättern“, die die Position des Benutzers auf der Seite bestimmt und sendet dann eine Anforderung an den Tracking-Server:

setInterval(reportposition, 1000); 
function reportposition() { 
    $(function() { 
      var $win = $(window); 

      $win.scroll(function() { 
       if ($win.scrollTop() == 0) { 
        _paq.push(['trackEvent', 'Scroll', 'PageTop']); 
}    else if (($(document).height() - $win.scrollTop() 
           < 7540) && ($(document).height() - $win.scrollTop() > 7500)) { 
        _paq.push(['trackEvent', 'Scroll', 'About']); 
} 
       else if ($win.height() + $win.scrollTop() 
           == $(document).height()) { 
        _paq.push(['trackEvent', 'Scroll', 'PageBottom']); 
       } 
      }); 
     }); 
}; 

jedoch jeder bewegen, dass der genügt ein Bedingungen tut dies Dutzende Male und sendet daher Dutzende von Tracking-Anfragen an den Server. Ich habe versucht, die Häufigkeit zu senken, mit der die Funktion mit setInterval ausgeführt wird, aber der Effekt ist vernachlässigbar. Gibt es eine Möglichkeit, die Funktion nur einmal auszulösen, wenn eine Bedingung erfüllt ist, bis eine andere Bedingung erfüllt ist?

Die Verwendung von scroll zur Überprüfung der Position des Benutzers scheint ziemlich anspruchsvoll in Bezug auf CPU-Zyklen zu sein, da manchmal Hunderte von Ereignissen mit einem einfachen Bildlauf auftreten können. Gibt es eine Möglichkeit, dieses Problem mit möglichst geringer CPU-Auslastung zu lösen?

Answer 1

Die Lösung hier ist zu prüfen, ob der scrollTop gleich dem scrollTop des aktuellen div ist, den der Benutzer gescrollt hat.

In Bezug auf die CPU, siehe https://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery. Dies ist eine Lösung; Idealerweise sollten Sie WebSockets verwenden (d. h. mit socket.io mit node.js).

Answer 2

Scroll-Ereignis ist in Ihrem Fall nicht notwendig, da es nur nützlich ist zu erkennen, ob der Benutzer gescrollt hat, während Sie das nur durch Vergleich mit scrollTop() Wert einer Sekunde überprüfen können. Sie brauchen nicht auch Höhenwerte zugreifen, wenn sie

setInterval(reportposition, 1000); 
var $win = $(window); 

function reportposition() { 
    $(function() { 
     if(scrollTop == $win.scrollTop()){ 
      //same position 
     } 
     scrollTop = $win.scrollTop(); 
     winHeight = $win.height(); 
     docHeight = $(document).height(); 
     if (scrollTop == 0) { 
      _paq.push(['trackEvent', 'Scroll', 'PageTop']); 
     }else if ((docHeight - scrollTop < 7540) 
      && (docHeight - scrollTop > 7500)) { 
      _paq.push(['trackEvent', 'Scroll', 'About']); 
     }else if (winHeight + scrollTop 
         == docHeight) { 
      _paq.push(['trackEvent', 'Scroll', 'PageBottom']); 
     } 
    }); 
}; 

Anders herum nicht tun, in der Scroll-Ereignis können Sie überprüfen, wie viel Zeit vergangen ist, und entscheiden, ob sie verarbeiten.