I have a couple of events that get fired depending on how far the user is on the page. Right now I'm using this
$(window).on({
scroll: function() {
trigger_scrolled();
}
});
I have been fiddling with the idea of check every X amount of milliseconds but I don't know how they compare.
Right now the app but it is very memory consuming. Is there a faster way to do this? or any other alternative?
You can limit the amount a function is being called by using a throttle/debouncing mechanism. Underscore.js has one, use a jQuery plugin, or write your own
Use JQuery scrollTop()
var allowed = true;
var timeoutID;
$(window).scroll(function () {
if (!allowed) return;
allowed = false;
if ($(document).scrollTop() > 1000) {
alert("Do stuff");
}
timeoutID = window.setTimeout(function(){allowed = true}, 3000);
});
See fiddle: http://jsfiddle.net/K6aRw/1/
Edit: added a time-out to make it check less oft.
Related
Hey so I'm quite a noob but I was wondering if the script below didn't fire too much? And if so, can someone help me optimise it?
<script>
jQuery(function() {
jQuery(window).scroll(function() {
if((jQuery(".main-content").height() - jQuery(window).scrollTop()) < 702) {
jQuery("h1.product-single__title, .product-single__title.h1").addClass('titleScroll');
jQuery("#ProductPhotoImg").addClass('imgScroll');
jQuery("div#option_total").addClass('optionScroll');
jQuery(".template-product .product-form__item--submit, .template-product .product-form__item--quantity").addClass('addScroll');
}
else {
jQuery("h1.product-single__title, .product-single__title.h1").removeClass('titleScroll');
jQuery("#ProductPhotoImg").removeClass('imgScroll');
jQuery("div#option_total").removeClass('optionScroll');
jQuery(".template-product .product-form__item--submit, .template-product .product-form__item--quantity").removeClass('addScroll');
}
});
});
</script>
Thanks
From https://dannyvankooten.com/delay-scroll-handlers-javascript/
var timer;
$(window).scroll(function() {
if(timer) {
window.clearTimeout(timer);
}
timer = window.setTimeout(function() {
// actual callback
console.log( "Firing!" );
}, 100);
});
What you're looking for is called "throttling". By throttling a function, it only get's triggered x times per second, where you can define x. There are multiple ways of going about this and also a lot of libraries offer this functionality. You can find a nice read here on CSS-tricks which focusses on the lodash implementation.
Another great way to save performance is using requestAnimationFrame() (MDN). This way you don't have to listen to scroll events, but you can tell the browser to perform some script on the next repaint. You could use it like so:
function doThis(){
// javascript you'd like to trigger
window.requestAnimationFrame(doThis); // call again to create a 'loop'
}
window.requestAnimationFrame(doThis); // initial call to get the 'loop' started
Testing this out and I'm trying to figure out how to stop a delay if i click another attribute. I'll post the site address to make this explanation a lot better, but basically when you press menu my nav appears with a delay, when I press Assignment 6 I want everything else to hide, which it does, but I see that because I have a delay when it hides and it's not done delaying it will continue to print out the rest of the elements even though they are supposed to be hidden. Also a disclaimer, I've gotten a lot of heat on this site before because I think people think I expect an answer. This is not the case, I love to learn and although the answer would be helpful and I would be able to de-engineer it and learn it, I would much rather have some guidance. So yeah, I'm not just looking for an answer if anyone thinks that's what I'm on here for (I come on here when I can't figure it out any other way).
site
my jQuery script:
$(document).ready(function () {
//$('ul').hide();
$('ul li').hide();
$('nav>li').hide();
$('nav>h1>').click(function (event) {
event.preventDefault();
$('nav>ul li:hidden').each(function(i) {
$('nav>li').show();
$('nav>h1').hide();
$(this).delay(i*600).fadeIn(200);
});
$('nav>ul li:visible').each(function(i) {
$('nav>h1').hide();
$(this).delay(i*600).fadeOut(200);
});
return false;
}); //closes a.btnDown
$('nav>li').click(function (event) {
$('nav>h1').show();
$('nav>li').hide();
$('ul li').hide();
return false;
}); //closes a.btnDown
}); //closes .ready
setTimeout is a useful mechanism to solve what you are after. It waits for (at least) the delay specified, and executes the callback function.
var elements = $('nav>ul li:hidden');
var timeoutId;
function doAnimation(index) {
timeoutId = window.setTimeout(function () {
if (index < elements.length) {
$(elements[index]).fadeIn(200);
doAnimation(++index);
}
}, 600);
}
The clue is to declare the timeoutId outside a recursive function, and assign it within the function. By doing it in a recursive fashion, you don't start the next timeout before the current timeout is finished, and it can be aborted at any time.
window.clearTimeout(timeoutId);
I've made a little fiddle that demonstrates the concept, but I haven't implemented a complete solution. Hope this helps you get further with your project.
http://jsfiddle.net/pyMpj/
You can replace your delays with setTimeout and clear them with clearTimeout
$('nav>ul li:hidden').each(function(i) {
$('nav>li').show();
$('nav>h1').hide();
var fadeTimeout = setTimeout(function () {
$(this).fadeIn(200);
}, i * 600);
});
$('nav>li').click(function (event) {
$('nav>h1').show();
$('nav>li').hide();
$('ul li').hide();
clearTimeout(fadeTimeout);
return false;
});
So, i have this little function:
carousel_controls_buttons.live('click', function(e){
setTimeout(function(){
info_board_span.append(info_board_description);
e.preventDefault();
}, 450);
});
What i'm trying to do is stop appending info_board_description more then one time after two, three fast clicks. When i do this this data appends more than one time and i have content duplication. How can i stop this for some time, f.e. this 450ms? Thx for help.
Use a boolean to control it.
var flag = true;
carousel_controls_buttons.live('click', function(e){
e.preventDefault();
if (flag) {
setTimeout(function(){
info_board_span.append(info_board_description);
flag = true;
}, 450);
flag = false;
}
});
You can use clearTimeout function:
var t = '';
carousel_controls_buttons.live('click', function(e){
clearTimeout(t);
t = setTimeout(function(){
info_board_span.append(info_board_description);
e.preventDefault();
}, 450);
});
example: http://jsfiddle.net/xhSvC/
Note that live method is deprecated, you should use on method instead.
While the other answers ought to work, I would like to introduce you to the concept of debounce & throttle.
http://benalman.com/projects/jquery-throttle-debounce-plugin/ is one plugin you may use to achieve what you need, ie, ensure a function is executed only once per x seconds.
Throttle versus debounce
Both throttling and debouncing will rate-limit execution of a
function, but which is appropriate for a given situation?
Well, to put it simply: while throttling limits the execution of a
function to no more than once every delay milliseconds, debouncing
guarantees that the function will only ever be executed a single time
(given a specified threshhold).
carousel_controls_buttons.live('click', function(e) {
$.debounce(450, function() {
info_board_span.append(info_board_description);
e.preventDefault();
});
});
Put an count over there say var count=0; increment when hit and check for the condition if count==1 append it if not leave it
There is a one event for achieve this:
carousel_controls_buttons.one('click', function() {
setTimeout(function(){
info_board_span.append(info_board_description);
e.preventDefault();
}, 450);
});
Please, take a look at this code (I'm using Zepto http://zeptojs.com/ BTW)...
var timer = false;
$(window).bind('touchstart touchmove scroll', function (e) {
if (timer === false) {
timer = setInterval(function () {
$('footer').css('top', (this.pageYOffset + this.innerHeight - 40) + 'px');
console.log('Adjusted...');
}, 100);
}
}).bind('touchend', function () {
clearInterval(timer);
timer = false;
console.log('Cleaned it up...');
});
As you can see, I have a footer element that I'm trying to keep fixed on the bottom of the iPhone screen. I know that there are libraries that helps us make this quite easily like iScroll 4 http://cubiq.org/iscroll-4, but I was trying to see if I could make it simpler.
It turns out that the code above doesn't work properly. While I'm actually scrolling the page, for some reason setInterval doesn't execute but instead seems to pile up on the background to run every call at the same time.
At the end it doesn't do what I wanted it to do, which is to "animate" the footer and have it in place during scroll not only after. Does anyone has any idea on how such effect could be achieved on some similar manner?
Thanks!
When you pass a method to setInterval() (or any other function, for that matter), it will be invoked with a wrong this value. This problem is explained in detail in the JavaScript reference.
MDC docs
Inside your outer callback, this will be the DOM element you care about, but inside the setInterval callback, this will be window. Keep in mind that this is a keyword, not a variable, and that it is highly context sensitive.
The usual approach is to capture the value of this in a variable and then use that variable instead of this:
if(timer === false) {
var self = this; // "_that" is also a common name for the variable.
timer = setInterval(function () {
$('footer').css('top', (self.pageYOffset + self.innerHeight - 40) + 'px');
console.log('Adjusted...');
}, 100);
}
Similar issues apply to all callbacks in JavaScript, always make sure you know what this is and grab its value and build a closure over that value when it won't be what you want.
I have a jQuery slider on my site and the code going to the next slide is in a function called nextImage. I used setInterval to run my function on a timer, and it does exactly what I want: it runs my slides on a timer. BUT, if I go to the site in Chrome, switch to another tab and return, the slider runs through the slides continuously until it 'catches up'. Does anyone know of a way to fix this. The following is my code.
setInterval(function() {
nextImage();
}, 8000);
How to detect when a tab is focused or not in Chrome with Javascript?
window.addEventListener('focus', function() {
document.title = 'focused';
},false);
window.addEventListener('blur', function() {
document.title = 'not focused';
},false);
To apply to your situation:
var autopager;
function startAutopager() {
autopager = window.setInterval(nextImage, 8000);
}
function stopAutopager() {
window.clearInterval(autopager);
}
window.addEventListener('focus', startAutopager);
window.addEventListener('blur', stopAutopager);
Note that in the latest version of Chromium, there is either a bug or a 'feature' which is making this less reliable, requiring that the user has clicked at least once anywhere in the window. See linked question above for details.
I post an answer here: How can I make setInterval also work when a tab is inactive in Chrome?
Just do this:
setInterval(function() {
$("#your-image-container").stop(true,true);
nextImage();
}, 1000);
inactive browser tabs buffer some of the setInterval or setTimeout functions.
stop(true,true) - will stop all buffered events and execute immadietly only last animation.
The window.setTimeout() method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).
A few ideas comes to mind:
Idea #1
You can make it so that a short burst is idempotent. For example, you could say:
function now() {
return (new Date()).getTime();
}
var autopagerInterval = 8000;
function startAutopager() {
var startImage = getCurrentImageNumber();
var startTime = now();
var autopager = setInterval(
function() {
var timeSinceStart = now() - startTime();
var targetImage = getCurrentImageNumber + Math.ceil(timeSinceStart/autopagerInterval);
if (getCurrentImageNumber() != targetImage)
setImageNumber(targetImage); // trigger animation, etc.
},
autopagerInterval
);
return autopager;
}
This way even if the function runs 1000 times, it will still run in only a few milliseconds and animate only once.
note: If the user leaves the page and comes back, it will have scrolled. This is probably not what the original poster wants, but I leave this solution up since it is sometimes what you want.
Idea #2
Another way to add idempotence (while still keeping your nextImage() function and not having it scroll to the bottom of the page) would be to have the function set a mutex lock which disappears after a second (cleared by another timeout). Thus even if the setInterval function was called 1000 times, only the first instance would run and the others would do nothing.
var locked = false;
var autopager = window.setInterval(function(){
if (!locked) {
locked = true;
window.setTimeout(function(){
locked=false;
}, 1000);
nextImage();
}
}, 8000);
edit: this may not work, see below
Idea #3
I tried the following test:
function f() {
console.log((new Date()) + window.focus());
window.setTimeout(f, 1000);
}
f();
It seems to indicate that the function is being called every second. This is odd... but I think this means that the callbacks are being called, but that the page renderer refuses to update the page in any graphical way while the tab is unfocused, delaying all operations until the user returns, but operations keep piling up.
Also the window.focus() function doesn't say if the window has focus; it GIVES focus to the window, and is thus irrelevant.
What we want is probably this: How to detect when a tab is focused or not in Chrome with Javascript? -- you can unset your interval when the window loses focus (blur), and reset it when it gains focus.
I don't know exactly what is going on in your function nextImage(), but I had a similar issue. I was using animate() with setInterval() on a jQuery image slider that I created, and I was experiencing the same thing as you when I switched to a different tab and back again. In my case the animate() function was being queued, so once the window regained focus the slider would go crazy. To fix this I just stopped the animate() function from queuing.
There are a couple ways you can do this. the easiest is with .stop(), but this issue and ways to fix it are documented in the jQuery docs. Check this page near the bottom under the heading additional notes: http://api.jquery.com/animate/
I had faced similar issue, somehow this code below works fine for me.
var t1= window.setInterval('autoScroll()', 8000);
window.addEventListener('focus', function() {
focused = true;
window.clearInterval(t1);
t1 = window.setInterval('autoScroll()', 8000);
},false);
window.addEventListener('blur', function() {
focused = false;
window.clearInterval(t1);
},false)
function autoScroll()
{
if ( running == true){
if ( focused = true){
forwardSlide();
}
}
else {
running = true;
}
}
If you are using Soh Tanaka's image slider then just add this...to solve your Google Chrome issue:
$(".image_reel").stop(true, true).fadeOut(300).animate({ left: -image_reelPosition}, 500 ).fadeIn(300);
Take note of the .stop() function. Ignore the fading in and out stuff, that's what I used on my version
Thanks
Seconding the comment by jgerstle to use page visibility events instead, see https://www.w3.org/TR/page-visibility/#example-1-visibility-aware-video-playback for more around subscribing to 'visibilitychange' for hidden/visible states.
This seems to be more useful than focus/blur these days as it covers visible-but-not-selected windows if concerned also about multi-window operating systems.