Πρόβλημα με εφαρμογή infinitive scroll (jQuery - PHP/MySQL)

[philos]

Γεια σας παιδιά!

Λοιπόν, έχω το εξής πρόβλημα. Αναπτύσσω μια σελίδα (jQuery/PHP/MySQL) όπου τροφοδοτεί στοιχεία με infinitive scroll.
Δηλαδή όταν ο χρήστης φτάσει στο κάτω μέρος της σελίδας, φορτώνονται αυτόματα περισσότερα στοιχεία.

Το πρόβλημα είναι ότι ειδικά σε Chrome, το φόρτωμα "κολλάει" και γενικά ψηλομπάζει η τεχνική μου.

Θα ήθελα να με βοηθήσετε να το βελτιώσω και να κάνω πιο αξιόπιστη την επιστροφή των δεδομένων (καθώς ορισμένες φορές επιστρέφονται και... ίδια στοιχεία).

Ο κώδικάς μου συνοπτικά είναι κάπως έτσι:
 

// όταν φτάνει στο υποσέλιδο ο χρήστης φορτώνει νέα στοιχεία
	if($(window).scrollTop() == $(document).height() - $(window).height()) {
			if (!loaded_lastfeeds[lastfeeddateline] && lastfeeddateline)
			{
				$('#sc_loadfeeds_progressbar').show();	
				$.ajax({
						url : "feeds.php",
						type: "POST",
						data: {
								act: 'getmorefeeds', lastfeeddateline: lastfeeddateline
							  },
						dataType: "html",
						success: function(data, textStatus, jqXHR){
								loaded_lastfeeds[lastfeeddateline] = true;
								$('#sc_autoload_more_feeds').before(data);
								$('#sc_loadfeeds_progressbar').hide();
								if(!data) { $('#sc_autoload_no_more_block').fadeIn(500);}
																	
						}
				});	
			}

    }

Το lastfeeddateline προέρχεται με τον εξής τρόπο (ξέρω tragic αλλά δεν μπόρεσα να σκεφτώ κάτι καλύτερο ): όταν φορτώνουν τα αρχικά στοιχεία (κάθε στοιχείο ανήκει σε ένα template της vBulletin), κάνω για κάθε στοιχείο:
var lastfeeddateline = {unix_timestamp} (unix timestamp του στοιχείου)

... οπότε η μεταβλητή αλλάζει συνέχεια τιμές, ώσπου όταν έχει φορτώσει και το τελευταίο στοιχείο, το lastfeeddateline έχει το dateline του τελευταίου στοιχείου.
Κατά τον ίδιο τρόπο, ακόμα και όταν έχουν φορτώσει και τα υπόλοιπα στοιχεία με AJAX, το lastfeeddateline ενημερώνεται καθώς φορτώνεται και το var lastfeeddateline = κάτι.

Κατ' αυτό τον τρόπο λοιπόν, στο feeds.php τρέχω το MySQL query με WHERE feeds.dateline < ". intval($lastfeeddateline) ." LIMIT 5

Χρειάζομαι βοήθεια καθώς μερικές φορές το script επιστρέφει ίδια στοιχεία (και πέφτει σε loaded_lastfeeds[lastfeeddateline] == true).
Για κάποιο λόγο αν κάνω την $.ajax, async: false, τα πράγματα βελτιώνονται, αλλά κάτι τέτοιο είναι deprecated, ειδικά στον Chrome.

Θα χαρώ να ακούσω κάθε προτεινόμενη λύση.

[alou]

Δεν μπορώ να πω ότι κατάλαβα όλα τα specifics του vbulletin που περιγράφεις αλλά για αρχή θα πρότεινα να βάλεις το ajax fn σε ένα function πχ updatePosts( ) και να καλείς με debounce για να μη γίνεται triggered πολλές φορές που μάλλον αυτό περιγράφεις. Το πιο απλό θα ήταν κάτι τέτοιο:

if (shouldRunTheInfiniteScrollUpdate) {
  if (updatePostsTimeout) {
    clearTimeout(updatePostsTimeout);
  }
  updatePostsTimeout = setTimeout(function () {
    updatePosts();
  }, 200);
}

Πρακτικά, θα δεις ότι η συνθήκη σου όταν φτάσει κάποιος στο σημείο που πρέπει να γίνει update το feed, θα γίνει triggered πολλές φορές οπότε θα κάνεις και πολλά ajax request. Το debounce λέει ότι αν σταματήσει να γίνεται trigger το event για 200ms, τότε κάνει ότι είναι να κάνεις. Προφανώς το 200 είναι προς συζήτηση αλλά λογικό νούμερο για να ξεκινήσεις να το ψάχνεις παραπάνω.

[philos]

Thanks, το έβαλα στον κώδικά μου και φαίνεται λειτουργεί εντάξει (θα το τεστάρω εκτενέστερα και θα ενημερώσω αν κάτι δεν πηγαίνει καλά). Ευχαριστώ

 

Απλά το μόνο ότι χρειάστηκε να αλλάξω το σχετικό τμήμα σε:

				if (typeof updatePostsTimeout !== 'undefined') {
					clearTimeout(updatePostsTimeout);
				}	

Καθώς μου επέστρεφε σφάλμα η κονσόλα ότι το η μεταβλητή updatePostsTimeout είναι undefined (μιας που είναι πρώτη στον κώδικα).

[philos]

Παιδιά το πρόβλημα συνεχίζεται.

Ουσιαστικά σε κάποιες φάσεις φορτώνει τα ίδια στοιχεία με αποτέλεσμα να πέφτει σε loaded_lastfeeds[lastfeeddateline] == true.

 

Βασικά, κάνω μια υπόθεση ότι το πρόβλημα οφείλεται στο ότι την:

if($(window).scrollTop() == $(document).height() - $(window).height()) {

 

...την κάνω μέσα σε:

$(window).scroll(function() {

(που τρέχει σε κάθε στιγμή scrolling)

 

Ειδικά όταν κοντεύω στο υποσέλιδο και πάω αργά το ροδάκι - scrolling με στόχο να το "αγγίξω", μάλλον εκεί είναι που προσπαθεί να κάνει πολλά requests λόγω της αστάθειας.

 

edit: Πάντως δοκίμασα να σώζω σε Cookie τη lastdateline, ωστόσο και πάλι όταν πιέζεται το infinitive scroll, κάποιες φορές επιστρέφει ένα σύνολο/page ίδιων αποτελεσμάτων... περίεργα πράγματα....

Επεξ/σία 19 Απριλίου 2017 από philos

[alou]

Υπάρχουν τουλάχιστον 2 θέματα που έχεις να λύσεις:

 

1. Το ότι γίνεται πολλές φορές triggered το event που καλεί το ajax function
2. Το ότι δεν χρησιμοποιείς τις μεταβλητές σωστά για να λειτουργήσει ασύγχρονα η διαδικασία

Για το 1, η λύση του debounce σε καλύπτει μερικά αλλά θα μπορούσες να βάλεις και ένα flag που όταν ξεκινήσει να τρέχει το ajax γίνεται true και στο success ή μόλις απεικονίσεις το περιεχόμενο ξαναγίνεται false.

 

Για το 2 δεν μπορώ να σου πω ακριβώς όμως πολύ πρόχειρα, φαντάσου το εξής:

 

Κάνεις το ajax request A με lastfeeddateline = 12345

Κάνεις το ajax request B με lastfeeddateline = 12345 (γιατί δεν έχει τρέξει το κομμάτι που το κάνει update)

 

σου επιστρέφει το Α και μετά το Β (η μπορεί και ανάποδα γιατί ασύγχρονα είναι, ότι θέλουν κάνουν) και τα απεικονίζεις και τα 2.

 

Η λύση με το flag, θεωρητικά, δεν θα επιτρέψει κάτι τέτοιο και πιθανότατα σε καλύπτει από όσο μπορώ να καταλάβω τουλάχιστον όποτε δοκίμασε αν θες μια τέτοια λογική:

var lastPostDate,
    callingAjax = false;


var shouldCallAjax = function() {

    if (conditionsAreTrue && !callingAjax) {
        return true;
    } else {
        return false;
    }
}

var displayContent = function(data) {
    //do html stuff
    //update lastPostDate
    //set callingAjax = false;
}

var updatePosts = function(postDate) {

    if (shouldCallAjax()) {

        callingAjax = true;// no request until this is set to false

        $('#sc_loadfeeds_progressbar').show();  
        $.ajax({
            url : "feeds.php",
            type: "POST",
            data: {
                act: 'getmorefeeds', lastfeeddateline: postDate
            },
            dataType: "html",
            success: function(data, textStatus, jqXHR){
                displayContent(data);
            }
        });

    }
}

$(window).scroll(function() {
    updatePosts(lastPostDate);
}

Επεξ/σία 19 Απριλίου 2017 από alou

[philos]

Ευχαριστώ και πάλι alou για τη βοήθεια!

 

Λοιπόν στο ενδιάμεσο βρήκα νομίζω τι έφταιγε: επέστρεψα στον αρχικό μου κώδικα και απλά έβαλα το:

loaded_lastfeeds[lastfeeddateline] = true;

... αμέσως μετά το if (!loaded_lastfeeds[lastfeeddateline] && lastfeeddateline)

... αντί να το κάνω στο sucess της ajax.

 

Μάλλον έφταιγε που λόγω της συγχρονικότητας, προτού φτάσει στο sucess ένα ajax call για να κάνει

loaded_lastfeeds[lastfeeddateline] = true;, γινόταν ένα απανοτό και επέστρεφε ίδια δεδομένα.

 

Νομίζω στην ουσία η λύση είναι ίδια, σημαίνεται ένα ajax call ότι έγινε, κι εφόσον έχει γίνει δεν το ξανά τρέχει.

 

Θα συνεχίσω να το παρακολουθώ και ελπίζω να μην έχω άλλα προβλήματα.