I'm using the siema slideshow because it seems super nice and lightweight.
I want the slideshow to play when the user hovers their mouse over, and stop when they leave.
I've got the play bit working - using setInterval() - as per the guide docs, but I can't get the slideshow to stop. I'm trying to kill the interval, but that doesn't seem to work.
Here's my full code
const mySiema = new Siema({
duration: 250,
loop: true, // note: this just gets the slideshow to return to the beginning
});
const container = document.querySelector('.siema');
var timer, intervalInSec = 1000;
container.addEventListener('mouseenter', () => setInterval(() => mySiema.next(), intervalInSec));
container.addEventListener('mouseleave', clearInterval(timer));
and heres a codepen for fiddling with.
You need to assign timer to the output of the setInterval() method.
It (setInterval) returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval()
You also need to call an anonymous function on the mouse leave event to properly call clearInterval(). For example:
container.addEventListener('mouseenter', () => timer = setInterval(() => mySiema.next(), intervalInSec));
container.addEventListener('mouseleave', () => clearInterval(timer));
Related
I'm trying to make a "cookie clicker" like game where I need to play a sound every time the clicker has been clicked. My problem is that the new Audio and the audio.play are in two separate functions (with global variables), which causes a delay from click to sound.
Are there any way to get rid of the delay, without moving them to the same function?
Here is where the audio is being defined:
[].forEach.call(document.getElementById('skins').children, function(e) {
e.onclick = function () {
klikketskin = this.id;
clicklyd = new Audio(`Medier/Lyd/Clicker/${klikketskin}.mp3`); }
Here's where it's played (later in the script):
function clickevent() {
clicklyd.play(); }
How it is now (turn on sound):
https://imgur.com/a/2vf4NWG
What i want (turn on sound):
https://imgur.com/a/x4wYFq2
Tank You! :D
You should reset the currentTime property back to 0 which will let the sound replay from the start, before calling play() again.
function clickevent() {
clicklyd.currentTime = 0;
clicklyd.play();
}
However this will cut off the previous sound if it's not finished yet.
I have a search input.searchinp from a third party that I cannot modify. But I want to move the results from the left side of the page to the right side. I do this currently with a setInterval. The reason I used this setInterval is that the div that I want to move is not present on the page when it is loaded. Therefore I cannot simply move it at that point.
The user needs to fill in at least 3 letters before the results div.dropdown-menu is created.
So to make it move I used this:
window.setInterval(function(){
/// call your function here
$('.dropdown-menu').contents().appendTo('.knowledgebase-related-questions');
}, 100);
Which works but I would like to know if there are drawbacks to doing this? Like website speed, slugginess or other drawbacks.
If it were me, Id add a listener to the input the user is typing in and set it up with a delay so my function is called X seconds after the user stops typing. Something like this:
var keyupDelay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
var inputSelector = '#some-id'; // adjust as needed
$(inputSelector ).keyup(function() {
keyupDelay(function(){
// append or replace your html as needed
}, 2500 ); // this will trigger 2.5 seconds after typing stops, adjust as needed
});
I'm building an app that has a timer to request geolocation while the timer is active. For a timer I'm using react-native-background-timer. Which is kind of working, but not exactly as I want.
With this piece of code:
BackgroundTimer.runBackgroundTimer(() => {
console.log('tic');
},
1000);
the timer is stopping when the app is in the background. While with this piece of code:
const intervalId = BackgroundTimer.setInterval(() => {
console.log('tic');
}, 1000);
it runs constantly even in the background, but I'm not able to stop it. When I run BackgroundTimer.clearInterval(intervalId);, the timer still runs. Even when I leave the screen and go back to my Home screen, the timer still ticks and never stops. This is not ideal, because I need timer to run for a few minutes and then stop.
I set the timer to 1 second to update time left on the screen. I was thinking about setting a timer once for 6 minutes, but then how do I update the state every second? Making 2 timers for this feels like a bad practise, even though it would work.
So to make it more clear, the user suppose to engage in certain activity like walking for a few minutes. So I can't let the timer to stop when user is answering a call or opened a music app to switch music or something else. Timer still needs to run and I need to measure the number of steps and distance with geolocation. It need to work flawlessly even if user opened another app, forgot about my app, and it would still run for the remaining time, then made a record to the database and stopped.
Try the following code snippet,
works both on android and ios
import { DeviceEventEmitter, NativeAppEventEmitter, Platform } from 'react-native';
import _BackgroundTimer from 'react-native-background-timer';
const EventEmitter = Platform.select({
ios: () => NativeAppEventEmitter,
android: () => DeviceEventEmitter,
})();
class BackgroundTimer {
static setInterval(callback, delay) {
_BackgroundTimer.start();
this.backgroundListener = EventEmitter.addListener("backgroundTimer", () => {
this.backgroundTimer = _BackgroundTimer.setInterval(callback, delay);
});
return this.backgroundListener;
}
static clearInterval(timer) {
if (timer) timer.remove();
if (this.backgroundTimer)
_BackgroundTimer.clearInterval(this.backgroundTimer);
_BackgroundTimer.stop();
}
}
export default BackgroundTimer;
Usage
const timer = BackgroundTimer.setInterval(callback, 1000);
BackgroundTimer.clearInterval(timer)
For some reason I got the following error when using #Aravind Vemula's answer.
When calling BackgroundTimer.clearInterval(timer); the following error appears:
timer.remove is not a function
That's why I modified the code slightly.
// parameter removed
static clearInterval() {
// ADD this if statement
if (this.backgroundListener){
this.backgroundListener.remove();
}
if (this.backgroundTimer)
_BackgroundTimer.clearInterval(this.backgroundTimer);
_BackgroundTimer.stop();
}
The above code checks if a backgroundlistener is registered. If yes it removes all listeners and especially our backgroundTimer.
Usage:
BackgroundTimer.clearInterval(); // removed parameter
After my change, everything is working fine on iOS 14.3.
#Aravind Vemula's answer working properly. But if user open the app from the background and timer code is added in background handler then when you stop the timer it is not working. So following changes you need to make in both the methods.
static setInterval(callback, delay) {
if (!this.backgroundListener && !this.locationTimer) {
_BackgroundTimer.start();
this.backgroundListener = EventEmitter.addListener('backgroundTimer', () => {
this.locationTimer = _BackgroundTimer.setInterval(callback, delay);
});
return this.locationTimer;
}
}
static clearInterval() {
if (this.backgroundListener) {
this.backgroundListener.remove();
}
if (this.locationTimer) {
_BackgroundTimer.clearInterval(this.locationTimer);
}
this.backgroundListener = false;
this.locationTimer = false;
_BackgroundTimer.stop();
_BackgroundTimer.start();
}
I tried the answer here: Resetting a setTimeout, but it doesn't seem to be working for me.
I'm building a catalog viewer using Owl Carousel. I have a function set to go off on the afterMove event handler that shows what page the user is on. It displays the page counter and then sets a timeout to have it fadeout after 1 second. Probably is lots of people go through pages faster than once per second. So, I need to reset the timeout if the function gets called again.
function showCounter(){
var $counter = $('#counter');
//clear timeout
window.clearTimeout(timeout);
//Display counter
$counter.show();
//set timeout
var timeout = window.setTimeout(function(){
$counter.fadeOut(500);
}, 1000);
}
But window.clearTimeout(timeout) doesn't seem to be working and I'm not sure why
Thanks
var timeout inside the function makes timeout local to the function; thus, every time you call showCounter, timeout is undefined. Move the variable declaration out of the function:
var timeout;
function showCounter() {
// ...
timeout = // NO VAR! ...
// ...
}
I have an animation of a car driving back and forth across the screen and have figured out how to flip the image when it reaches the right side of the screen and then again when it reaches the left side. However, I need to loop this JS event so the animation constantly shows the car driving in the correct 'direction.' The code below should give you an idea of what I'm working with, so if anyone could be so kind as to help this beginner figure out how to make it loop infinitely, I would greatly appreciate it.
*tl/dr
Basically I need the code below to loop infinitely.
var carorange = $('.org-car');
setTimeout(function () {
carorange.addClass('flipimg');
}, 5000);
setTimeout(function () {
carorange.removeClass('flipimg');
}, 10000);
Use setInterval instead of setTimeout:
var carorange = $('.org-car');
setInterval(function () {
carorange.toggleClass('flipimg');
}, 5000);
setInterval has a nother big advantage: You can stop the interval. So if you assign the interval to a variable, like var myTimer = setInterval..., you can stop it at any time using clearInterval(myTimer); :)