I have a vue directed I use in order to apply a fixed class to the inserted DOM element, in order to do this I also attach an event listener to the window object to run when the user scrolls.
My question is, should I remove this event listener when my element is destroyed? I heard the scroll event can affect performance and I'm not sure if the event listener is automatically destroyed each time I refresh a page (my app is not SPA but a laravel app with vue for frontend).
This is my directive:
Vue.directive('scroll-apply-class', {
isLiteral: true,
inserted: (el, binding, vnode) => {
let scrolled = false;
let stickyTop = 300;
setTimeout(function(){
stickyTop = el.offsetTop;
checkPosition();
window.addEventListener('scroll', function(e) {
scrolled = true;
});
}, 2500);
let checkPosition = function(){
if (window.pageYOffset > stickyTop && window.innerWidth > 765) {
el.classList.add(binding.value)
}
else {
el.classList.remove(binding.value)
}
};
let timeout = setInterval(function() {
if (scrolled) {
scrolled = false;
checkPosition();
}
}, 2500);
}
});
If you care about "decency" then yes, do the right thing, remove that listener. But from a pragmatist's view, maybe not. Since your app is not SPA, each time user click a link and go to other page, that problem is automatically taken cared.
But still, it depends. Is there any chance that in some scenario, this directive is loaded many times on one long-lasting visit to one of your pages? If there is such case, then it's a good idea to properly unregister the listener. If no, the directive is only loaded once, then you can safely leave it as is.
You can remove the event listeners on the window in the unbind hook. However, in order to remove the event listeners, you will need to store their callbacks. This can be done by simply storing it as a property of el, e.g. el.scrollCallback:
bind: (el) => {
el.scrollCallback = () => {
el.dataset.scrolled = true;
}
},
unbind: (el) => {
window.removeEventListener('scroll', el.scrollCallback);
},
Then, in your inserted hook, just update the way you store the scrolled boolean. Instead of encapsulating it within the hook, you can store it in the el's dataset so that it can be accessed by other hooks:
inserted: (el, binding, vnode) => {
// Store data in element directly
el.dataset.scrolled = false;
let stickyTop = 300;
setTimeout(function(){
stickyTop = el.offsetTop;
checkPosition();
window.addEventListener('scroll', el.scrollCallback);
}, 2500);
// REST OF YOUR CODE HERE
// Remember to update all references to `scrolled` to `el.dataset.scrolled`
let timeout = setInterval(function() {
if (el.dataset.scrolled) {
el.dataset.scrolled = false;
checkPosition();
}
}, 2500);
}
Related
On the page there is a link with id get-more-posts, by clicking on which articles are loaded. Initially, it is outside the screen. The task is to scroll the screen to this link by clicking on it. The code below does what you need. But the event is called many times. Only need one click when I get to this element scrolling.
p.s. sorry for my bad english
$(window).on("scroll", function() {
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
$('#get-more-posts').click();
}
});
Try use removeEventListener or use variable with flag, just event scroll detached more at once
You can set up throttling by checking if you are already running the callback. One way is with a setTimeout function, like below:
var throttled = null;
$(window).on("scroll", function() {
if(!throttled){
throttled = setTimeout(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
$('#get-more-posts').click();
throttled = null;
}
}.bind(window), 50);
}
}.bind(window));
Here's an ES6 version that might resolve the scoping issues I mentioned:
let throttled = null;
$(window).on("scroll", () => {
if(!throttled){
throttled = setTimeout(() => {
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
$('#get-more-posts').click();
throttled = null;
}
}, 50);
}
});
The last argument of setTimeout is the delay before running. I chose 50 arbitrarily but you can experiment to see what works best.
I don't know how true it is, but it works. After the event (click), delete the element id, and then add it again, so the click is performed once. Scroll the page to the desired item, click again, delete the id and add it again. It works. Can someone come in handy.
window.addEventListener('scroll', throttle(callback, 50));
function throttle(fn, wait) {
var time = Date.now();
return function() {
if ((time + wait - Date.now()) < 0) {
fn();
time = Date.now();
}
}
}
function callback() {
var target = document.getElementById('get-more-posts');
if((($(window).scrollTop()+$(window).height())+650)>=$(document).height()){
$('#get-more-posts').click();
$("#get-more-posts").removeAttr("id");
//$(".get-more-posts").attr("id='get-more-posts'");
};
}
window.removeEventListener('scroll', throttle(callback, 50));
I am trying to remove scroll event listener when I scroll to some element. What I am trying to do is call a click event when some elements are in a viewport. The problem is that the click event keeps calling all the time or after first call not at all. (Sorry - difficult to explain) and I would like to remove the scroll event to stop calling the click function.
My code:
window.addEventListener('scroll', () => {
window.onscroll = slideMenu;
// offsetTop - the distance of the current element relative to the top;
if (window.scrollY > elementTarget.offsetTop) {
const scrolledPx = (window.scrollY - elementTarget.offsetTop);
// going forward one step
if (scrolledPx < viewportHeight) {
// console.log('section one');
const link = document.getElementById('2');
if (link.stopclik === undefined) {
link.click();
link.stopclik = true;
}
}
// SECOND STEP
if (viewportHeight < scrolledPx && (viewportHeight * 2) > scrolledPx) {
console.log('section two');
// Initial state
let scrollPos = 0;
window.addEventListener('scroll', () => {
if ((document.body.getBoundingClientRect()).top > scrollPos) { // UP
const link1 = document.getElementById('1');
link1.stopclik = undefined;
if (link1.stopclik === undefined) {
link1.click();
link1.stopclik = true;
}
} else {
console.log('down');
}
// saves the new position for iteration.
scrollPos = (document.body.getBoundingClientRect()).top;
});
}
if ((viewportHeight * 2) < scrolledPx && (viewportHeight * 3) > scrolledPx) {
console.log('section three');
}
const moveInPercent = scrolledPx / base;
const move = -1 * (moveInPercent);
innerWrapper.style.transform = `translate(${move}%)`;
}
});
You can only remove event listeners on external functions. You cannot remove event listeners on anonymous functions, like you have used.
Replace this code
window.addEventListener('scroll', () => { ... };
and do this instead
window.addEventListener('scroll', someFunction);
Then move your function logic into the function
function someFunction() {
// add logic here
}
You can then remove the click listener when some condition is met i.e. when the element is in the viewport
window.removeEventListener('scroll', someFunction);
Instead of listening to scroll event you should try using Intersection Observer (IO) Listening to scroll event and calculating the position of elements on each scroll can be bad for performance. With IO you can use a callback function whenever two elements on the page are intersecting with each other or intersecting with the viewport.
To use IO you first have to specify the options for IO. Since you want to check if your element is in view, leave the root element out.
let options = {
rootMargin: '0px',
threshold: 1.0
}
let observer = new IntersectionObserver(callback, options);
Then you specify which elements you want to watch:
let target = slideMenu; //document.querySelector('#oneElement') or document.querySelectorAll('.multiple-elements')
observer.observe(target); // if you have multiple elements, loop through them to add observer
Lastly you have to define what should happen once the element is in the viewport:
let callback = (entries, observer) => {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
});
};
You can also unobserve an element if you don't need the observer anymore.
Check this polyfill from w3c to support older browsers.
Here is my scenario/code, call removeEventListener as return() in the useEffect hook.
const detectPageScroll = () => {
if (window.pageYOffset > YOFFSET && showDrawer) {
// do something
}
};
React.useEffect(() => {
if (showDrawer) {
window.addEventListener("scroll", detectPageScroll);
}
return () => {
window.removeEventListener("scroll", detectPageScroll);
};
}, [showDrawer]);
In my Vue app, I have a place where I'm setting a timer. I'd like to interrupt the timer if the user presses any key or clicks anywhere in the browser window.
I do not want to stop whatever they clicked from happening. I just want to get a callback whenever it does.
I could just put a function call in every handler, but that is both tedious, sloppy, and not very maintainable.
This is what I'm trying to achieve:
let timerId;
const startTheTimer = () => {
timerId = setTimeout(() => {
somestuff();
timerId = undefined;
}, 10000);
}
// Called whenever any mouse click or keyboard event happens
const userDidSomething = () => {
if (timerId) {
clearTimeout(timerId);
timerId = undefined;
}
}
So, my question is, how do I get the function userDidSomething() to be called?
Thanks.
Your question doesn't seem to have much to do with Vue. You'd just need to attach an event listener to document. For example
document.addEventListener('click', userDidSomething)
document.addEventListener('keydown', userDidSomething)
Note: Any event that is caught and has stopPropagation() called will not reach the document.
If your timer is set within a component, you should probably do all this in your component's mounted lifecycle hook.
It would also be a good idea to clear the timeouts and remove the listeners in the beforeDestroy hook.
For example
export default {
data () {
return {
timerId: null
}
},
methods: {
startTimer () {
this.timerId = setTimeout(...)
},
clearTimer () {
clearTimeout(this.timerId)
}
},
mounted () {
this.startTimer() // assuming you want to start the timer on mount
document.addEventListener('click', this.clearTimer)
document.addEventListener('keydown', this.clearTimer)
},
beforeDestroy () {
this.clearTimer()
document.removeEventListener('click', this.clearTimer)
document.removeEventListener('keydown', this.clearTimer)
}
}
What I want:
Monitor a player to execute a function when it reach 85% of the movie - Ok
Execute a PHP script that insert some data into a Mysql table - Ok
Do this only one time (stop looping), since I want only one row in the Mysql table - Fail
My code:
jwplayer().onTime(function(evt) {
if (evt.position > ([evt.duration] * (85/100)) && x!=1) {
loadXMLDoc();
var x = 1;
}
});
Thanks
The problem is that x gets reset everytime
jwplayer().onTime(
(function () {
var check=true;
return function(evt) {
if (check && evt.position > ([evt.duration] * (85/100))) {
loadXMLDoc();
check=false;
}
}
})()
);
If you want the function to run only once with each page load, another approach is to make a function that commits suicide.
(function (player) {
var checkAndLoad = function(evt) {
if (evt.position > (evt.duration * (85/100))) {
loadXMLDoc();
checkAndLoad=function(evt){};
}
};
player.onTime(function(evt) {checkAndLoad(evt);});
})(jwplayer());
You need the extra indirection provided by the anonymous wrapper since onTime gets its own copy of the event listener, so overwriting checkAndLoad won't affect the registered listener directly.
If you want the listener to run more than once, register additional listeners that restore checkAndLoad at the appropriate events (e.g. the user seeks back to near the beginning).
(function (player) {
var timeListener;
function checkAndLoad(evt) {
if (evt.position > (evt.duration * (85/100))) {
loadXMLDoc();
timeListener=function(evt){};
}
}
timeListener = checkAndLoad;
player.onTime(function(evt) {timeListener(evt);});
player.onSeek(function(evt) {
if (evt.position < (evt.duration * (15/100))) {
timeListener=checkAndLoad;
}
});
player.onComplete(function (evt) {timeListener=checkAndLoad;});
})(jwplayer());
Better would be to unregister the listener, but the JW Player API doesn't currently expose the removeEventListener method.
I have an element on my page that I need to attach onclick and ondblclick event handlers to. When a single click happens, it should do something different than a double-click. When I first started trying to make this work, my head started spinning. Obviously, onclick will always fire when you double-click. So I tried using a timeout-based structure like this...
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
el.onclick = function() {
timer = setTimeout(function() { alert('Single'); }, 150);
}
el.ondblclick = function() {
clearTimeout(timer);
alert('Double');
}
}
But I got inconsistent results (using IE8). It would work properly alot of times, but sometimes I would get the "Single" alert two times.
Has anybody done this before? Is there a more effective way?
Like Matt, I had a much better experience when I increased the timeout value slightly. Also, to mitigate the problem of single click firing twice (which I was unable to reproduce with the higher timer anyway), I added a line to the single click handler:
el.onclick = function() {
if (timer) clearTimeout(timer);
timer = setTimeout(function() { alert('Single'); }, 250);
}
This way, if click is already set to fire, it will clear itself to avoid duplicate 'Single' alerts.
If you're getting 2 alerts, it would seem your threshold for detecing a double click is too small. Try increasing 150 to 300ms.
Also - I'm not sure that you are guaranteed the order in which click and dblclick are fired. So, when your dblclick gets fired, it clears out the first click event, but if it fires before the second 'click' event, this second event will still fire on its own, and you'll end up with both a double click event firing and a single click event firing.
I see two possible solutions to this potential problem:
1) Set another timeout for actually firing the double-click event. Mark in your code that the double click event is about to fire. Then, when the 2nd 'single click' event fires, it can check on this state, and say "oops, dbl click pending, so I'll do nothing"
2) The second option is to swap your target functions out based on click events. It might look something like this:
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
var firing = false;
var singleClick = function(){
alert('Single');
};
var doubleClick = function(){
alert('Double');
};
var firingFunc = singleClick;
el.onclick = function() {
// Detect the 2nd single click event, so we can stop it
if(firing)
return;
firing = true;
timer = setTimeout(function() {
firingFunc();
// Always revert back to singleClick firing function
firingFunc = singleClick;
firing = false;
}, 150);
}
el.ondblclick = function() {
firingFunc = doubleClick;
// Now, when the original timeout of your single click finishes,
// firingFunc will be pointing to your doubleClick handler
}
}
Basically what is happening here is you let the original timeout you set continue. It will always call firingFunc(); The only thing that changes is what firingFunc() is actually pointing to. Once the double click is detected, it sets it to doubleClick. And then we always revert back to singleClick once the timeout expires.
We also have a "firing" variable in there so we know to intercept the 2nd single click event.
Another alternative is to ignore dblclick events entirely, and just detect it with the single clicks and the timer:
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
var firing = false;
var singleClick = function(){
alert('Single');
};
var doubleClick = function(){
alert('Double');
};
var firingFunc = singleClick;
el.onclick = function() {
// Detect the 2nd single click event, so we can set it to doubleClick
if(firing){
firingFunc = doubleClick;
return;
}
firing = true;
timer = setTimeout(function() {
firingFunc();
// Always revert back to singleClick firing function
firingFunc = singleClick;
firing = false;
}, 150);
}
}
This is untested :)
Simple:
obj.onclick=function(e){
if(obj.timerID){
clearTimeout(obj.timerID);
obj.timerID=null;
console.log("double")
}
else{
obj.timerID=setTimeout(function(){
obj.timerID=null;
console.log("single")
},250)}
}//onclick
Small fix
if(typeof dbtimer != "undefined"){
dbclearTimeout(timer);
timer = undefined;
//double click
}else{
dbtimer = setTimeout(function() {
dbtimer = undefined;
//single click
}, 250);
}
, cellclick :
function(){
setTimeout(function(){
if (this.dblclickchk) return;
setTimeout(function(){
click event......
},100);
},500);
}
, celldblclick :
function(){
setTimeout(function(){
this.dblclickchk = true;
setTimeout(function(){
dblclick event.....
},100);
setTimeout(function(){
this.dblclickchk = false;
},3000);
},1);
}
I found by accident that this works (it's a case with Bing Maps):
pushpin.clickTimer = -1;
Microsoft.Maps.Events.addHandler(pushpin, 'click', (pushpin) {
return function () {
if (pushpin.clickTimer == -1) {
pushpin.clickTimer = setTimeout((function (pushpin) {
return function () {
alert('Single Clic!');
pushpin.clickTimer = -1;
// single click handle code here
}
}(pushpin)), 300);
}
}
}(pushpin)));
Microsoft.Maps.Events.addHandler(pushpin, 'dblclick', (function (pushpin) {
return function () {
alert('Double Click!');
clearTimeout(pushpin.clickTimer);
pushpin.clickTimer = -1;
// double click handle here
}
}(pushpin)));
It looks like the click event masks the dblclick event, and this usage is clearing it when we add a timeout. So, hopefully, this will work also with non Bing Maps cases, after a slight adaptation, but I didn't try it.