There is an application that listens to scrolling the screen by the user.
So that's why if the scrolling is done with the mouse wheel, the data comes an order of magnitude slower than if you scroll the page with a space.
Server code is not laid out, there is no point.
Below is the application code.
#HostListener('window:scroll', ['$event']) checkScroll() {
if (!this.getdata) {
const componentPosition = this.el.nativeElement.offsetTop;
const componentHeight = this.el.nativeElement.getBoundingClientRect().height;
const scrollPosition = window.pageYOffset;
const windowheight = window.outerHeight;
const needposition = componentPosition + componentHeight - windowheight - 500;
if (scrollPosition >= needposition) {
this.getdata = true;
this.getMoreNew();
}
}
}
getMoreNew() {
if (!this.nomoredata) {
const city = this.city;
const find = this.find;
const last = this.persones[this.persones.length - 1]['orderbyname'];
this.httpClient.post<Array<any>>('/assets/api/index.php', {action: 'person', type: this.type, last, limit: this.limit, city, find })
.subscribe(
data => {
if (data.length === 0) {
this.nomoredata = true;
this.getdata = false;
} else {
this.persones = this.persones.concat(data);
this.getdata = false;
}
}
);
} else {
this.getdata = false;
}
}
See screenshot from devtools:
I am not entirely sure what the question is, but I think it's that your scroll is too slow and you want to have a way to help offload the computation for the event? You could try using a debounce to ignore the scrolling until the user is done.
I wanted to do is make the porgressbar run if i click the link to progress bar and then redirect to Profile form after the progressbar reach 100%. I'm making a single page website using javascript show and hide form.
My problem is when the program starts the progressbar starts too even though I am in the Home form and it will auto redirect to Profile form.
current output:
http://jsfiddle.net/6VrXD/25/
var value = 0, progress;
//progress bar script
function progressBar() {
progress = setInterval(function () {
var $bar = $('.bar');
if (value >= 100) {
clearInterval(progress);
$('.progress').removeClass('active');
// go to profile after progress bar reaches 100%
$(".show-page[data-page=Profile]").trigger("click");
} else {
value += 10;
$bar.width(value * 4);
}
$bar.text(value + "%");
}, 800);
};
That happens because you are calling progressBar function on $(document).ready callback even though the starting page is not the progress bar page. So the function does what is supposed to do, irrespective of whether or not the progress bar is actually shown or not.
Removing that should make the code work as expected. http://jsfiddle.net/6VrXD/27/
// vars
var value = 0, progress;
//progress bar script
function progressBar() {
progress = setInterval(function () {
var $bar = $('.bar');
if (value >= 100) {
clearInterval(progress);
$('.progress').removeClass('active');
// go to profile after progress bar reaches 100%
$(".show-page[data-page=Profile]").trigger("click");
} else {
value += 10;
$bar.width(value * 4);
}
$bar.text(value + "%");
}, 800);
};
//for my show and hide form script
$(document).ready(function () {
//progressBar();
if (typeof (Storage) !== "undefined" && sessionStorage.getItem('pageToShow')) {
var pageToShow = sessionStorage.getItem('pageToShow');
$('.page').addClass('hide');
$('.' + pageToShow).removeClass('hide');
};
$('.show-page').click(function () {
var pageToShow = $(this).data('page');
if (pageToShow == "progBar") {
// reset progress var
value = 0;
$('.bar').width(0);
$('.progress').addClass('active');
progressBar();
} else {
clearInterval(progress);
};
$('.page').addClass('hide');
$('.' + pageToShow).removeClass('hide');
if (typeof (Storage) !== "undefined") {
sessionStorage.setItem('pageToShow', pageToShow);
};
});
$('.modal-btn').click(function () {
$('.modal').modal('hide');
});
});
The following piece of code loads the next page, when the user scrolls to the bottom. However, sometimes it is repeating itself — when the user scrolls too rapidly, or scrolls whilst the AJAX is still being loaded.
Is there a way to prevent it from firing multiple times? So for example, nothing can be loaded while the AJAX is being called, or the AJAX can only be called once a second?
Any help would be great.
$(window).scroll(function() {
if( $(window).scrollTop() + $(window).height() == $(document).height()) {
if (firstURL !== null) {
$.get(firstURL, function(html) { // this gets called multiple times on erratic scrolling
firstURL = '';
var q = $(html).find('.post');
l = $(html).filter('div.bottom-nav');
if( l[0].childNodes.length > 0 ){
firstURL = l[0].children[0].getAttribute('href');
} else {
firstURL = null;
}
q.imagesLoaded( function() {
jQuery(".content").append(q).masonry( 'appended', q, true );
});
});
}
}
});
Just add a flag :
var ready = true; //Assign the flag here
$(window).scroll(function() {
//Check the flag here. Check it first, it's better performance wise.
if(ready && $(window).scrollTop() + $(window).height() == $(document).height()) {
ready = false; //Set the flag here
if (firstURL !== null) {
$.get(firstURL, function(html) { // this gets called multiple times on erratic scrolling
firstURL = '';
var q = $(html).find('.post');
l = $(html).filter('div.bottom-nav');
if( l[0].childNodes.length > 0 ){
firstURL = l[0].children[0].getAttribute('href');
} else {
firstURL = null;
}
q.imagesLoaded( function() {
jQuery(".content").append(q).masonry( 'appended', q, true );
});
}).always(function(){
ready = true; //Reset the flag here
});
}
}
});
I had a similar issue, that scrolling the window fired my function multiple times (manupulating my img slider's properties). To effectively deal with that matter you can defer the execution of scroll handler and use an additional 'page is being scrolled' flag to prevent multiple handler calls.
Check out the example below, you can surely addopt the approach to your case.
$(function()
{
var pageFold = 175; //scrolling threshold
var doScroll = false; //init
var timeoutScroll = 100; //delay
var windowScrolled = false; //initial scrolling indicatior
var windowScrolling = false; //current scrolling status indicator
//load next page handler
function loadNextPage()
{
if(windowScrolling != true)
{
//and do ajax stuff - your code
}
}
//check if page scrolled below threshold handler
function foldedBelow()
{
//nice scrolled px amount detection
return (Math.max($('body').scrollTop(), $('html').scrollTop()) > pageFold);
}
//actual scrolled handler
function doWindowScroll()
{
windowScrolled = true;
if(foldedBelow())
{
loadNextPage();
}
windowScrolling = false;
}
//deffered scroll hook
$(window).scroll(function(e){
windowScrolling = true;
clearTimeout(doScroll);
doScroll = setTimeout(doWindowScroll, timeoutScroll);
});
});
When I did something like this I implemented a timed scroll handler that calls a custom scrolled_to_bottom-event.
(function($, window, document){
"use strict";
var $document = $(document);
var $window = $(window);
var _throttleTimer = null;
var _throttleDelay = 100;
function ScrollHandler(event) {
//throttle event:
clearTimeout(_throttleTimer);
_throttleTimer = setTimeout(function () {
if ($window.scrollTop() + $window.height() > $document.height() - 400) {
console.log('fire_scrolled_to_bottom');
$document.trigger('scrolled_to_bottom');
}
}, _throttleDelay);
}
$document.ready(function () {
$window
.off('scroll', ScrollHandler)
.on('scroll', ScrollHandler);
});
}(jQuery, window, document));
And then in my object handling the reload I bound that event with a flag-check if it was already loading.
handler = {
...,
isLoading: false,
bind: {
var self = this;
$document.on('scrolled_to_bottom', function () {
if (self.isLoading) {
return;
}
self.nextPage();
});
}
nextPage(): function () {
var self = this;
this.isLoading = true;
$.ajax({
url: url,
data: self.searchData,
dataType: "json",
type: "POST",
success: function (json) {
// do what you want with respone
},
error: function (xhr, statusText, errorThrown) {
bootbox.alert('An error occured.');
},
complete: function () {
self.isLoading = false;
}
});
},
init: function () {
this.doInitStuff();
this.bind();
}
}
This way I seperated the concerns and can reuse the triggering nicely, and easily add functionality if other things should happen on reload.
Try storing some kind of data that stores whether the page is currently loading new items. Maybe like this:
$(window).data('ajaxready', true).scroll(function(e) {
if ($(window).data('ajaxready') == false) return;
if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
$('div#loadmoreajaxloader').show();
$(window).data('ajaxready', false);
$.ajax({
cache: false,
url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'),
success: function(html) {
if (html) {
$('#postswrapper').append(html);
$('div#loadmoreajaxloader').hide();
} else {
$('div#loadmoreajaxloader').html();
}
$(window).data('ajaxready', true);
}
});
}
});
Right before the Ajax request is sent, a flag is cleared signifying that the document is not ready for more Ajax requests. Once the Ajax completes successfully, it sets the flag back to true, and more requests can be triggered.
copied : jQuery Infinite Scroll - event fires multiple times when scrolling is fast
Here is my solution. You can get an idea and apply it to yours. Also to help others.
You can execute your method first with condition: if(loadInterval ===
null). That means if we already waited for 5 secs.
Assign loadInterval = setTimeout(), then nullify the variable after 5 secs.
Here is sample code.
//declare outside
var loadInterval = null;
// .....
// .....
$(window).scroll(function() {
if ($('.loadmore').isOnScreen() === true) {
//No waiting registered, we can run loadMore
if(loadInterval === null) {
// This console.log executes in 5 seconds interval
console.log('Just called ' + new Date());
// your code in here is prevented from running many times on scroll
// Register setTimeout() to wait for some seconds.
// The code above will not run until this is nullified
loadInterval = setTimeout(function(){
//Nullified interval after 5 seconds
loadInterval = null;}
, 5000);
}
}
});
I post here the IsOnScreen() plugin for jQuery (i found it on stackoverflow :)
$.fn.isOnScreen = function() {
var win = $(window);
var viewport = {
top: win.scrollTop(),
left: win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
hi am using ajax scroll pagination i am checked when i scroll page in speed its work two times and when its work two time it send same id two times and its effective on result how can i solve this issue?
here my script
$(document).ready(function(){
function last_msg_funtion()
{
var IDall=$(".box-mainb:last").attr("id");
var cbid=$(".box-mainp:last").attr("id");
$('div#last_msg_loaderi').html('<img src="bigLoader.gif">');
$.get('page.php', {'action':'get','last_msg_id':IDall,'id':cbid},
function(dataz){
if (dataz != "") {
$(".box-mainb:last").after(dataz);
}
$('div#last_msg_loaderi').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
});
});
One solution will be to use a flag to check whether there is already another scroll operation in progress, like
$(document).ready(function () {
var loading = false;
function last_msg_funtion() {
var IDall = $(".box-mainb:last").attr("id");
var cbid = $(".box-mainp:last").attr("id");
$('div#last_msg_loaderi').html('<img src="bigLoader.gif">');
loading = true;
$.get('page.php', {
'action': 'get',
'last_msg_id': IDall,
'id': cbid
}, function (dataz) {
if (dataz != "") {
$(".box-mainb:last").after(dataz);
}
$('div#last_msg_loaderi').empty();
}).always(function () {
loading = false;
});
};
$(window).scroll(function () {
if (loading) {
return;
}
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
last_msg_funtion();
}
});
});
I have a website and someone is using the below code to force my website not to break out of their iframe. I've tried every available frame breaker script to no avail. Any help would be great! Thanks Guys!
Buster: function () {
var interval = setInterval(function () {
if (Lbjs.IsClick) {
clearInterval(interval);
}
else if (Lbjs.Unload > 0) {
Lbjs.Unload -= 2;
window.top.location.replace("/cancelnavigation/");
Lbjs.NavigationNotice();
}
}, 1);
var clearDelay = (this.Countdown > 0) ? this.Countdown : 8;
setTimeout(function () { clearInterval(interval); }, clearDelay * 1000);
},
NavigationNotice: function () {
var navNotice = document.getElementById("navNotice");
navNotice.innerHTML = "<span class=\"warning\" style=\"text-align:center;height:20px;width: 400px;padding: 10px;\"><b>Request Cancelled</b> - Navigation is disabled for 8 Seconds...</span>";
if (navNotice.style.display == "none") {
this.Fader.FadeIn(navNotice, 200, function () {
setTimeout(function () {
Lbjs.Fader.FadeOut(navNotice, 200, null);
}, 1500);
});
}
},
Check the referrer of the page, and simply send something else if the request comes from their server.
This has to be done using a server platform though, it can't be done using Javascript.