We Keep Coding

How to clear a sequence of audio with timeouts in React

I have set 4 timeout for audios in my application and I need to stop the audios after user click. The macro function is working correctly, however the clearTimout does not stop the sound. Anyone knows how to clear it?
export function handlePlay(audio) {
audio.currentTime = 0;
return audio.play();
}
export function handleConversation(clear) {
const timer1 = () => setTimeout(() => {
handlePlay(conversation[Math.floor(Math.random() * conversation.length)]);
}, TIME1);
const timer2 = () => setTimeout(() => {
handlePlay(conversation[Math.floor(Math.random() * conversation.length)]);
}, TIME2);
const timer3 = () => setTimeout(() => {
handlePlay(conversation[Math.floor(Math.random() * conversation.length)]);
}, TIME3);
const timer4 = () => setTimeout(() => {
handlePlay(conversation[Math.floor(Math.random() * conversation.length)]);
}, TIME4);
if (clear) {
console.log('enter clear');
return () => {
clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);
clearTimeout(timer4);
};
}
timer1();
timer2();
timer3();
timer4();
}

after clearTimeouts call this code
audio.pause();
audio.currentTime = 0;

Here a suggestion of what you could do.
I guess this could be improved further regarding how this handleConversation function is used, I didn't really get the whole idea and there is still some inconsistencies...
function createAudio(track) {
track.audio = conversation[Math.floor(Math.random() * conversation.length)];
}
export class Track {
constructor(time) {
this.time = time;
this.timeoutid = 0;
this.audio = new Audio();
}
timer() {
this.timeoutid = setTimeout(() => {
createAudio(this);
handlePlay(this.audio);
}, TIME1);
}
play() {
this.audio.currentTime = 0;
this.audio.play();
}
stop() {
this.audio.pause();
this.audio.currentTime = 0;
clearTimeout(this.timeoutid)
}
}
export function handleConversation(clear) {
const track1 = new Track(TIME1);
const track2 = new Track(TIME2);
const track3 = new Track(TIME3);
const track4 = new Track(TIME4);
// this part actually doesn't make a lot of sense, since all tracks will be recreated each time the function is called.
// I don't really understand how this is used.
// I imagine the tracks should more likey be stored outside the function in a persistent object.
// I will modify my answer if you provide more details about how you use handleConversation
if (clear) {
console.log('enter clear');
return () => {
[track1, track2, track3, track4].forEach(track => {
track.stop()
});
};
}
[track1, track2, track3, track4].forEach(track => {
track.timer()
});
}

pointerEvents = "none" not working as expected

I'm creating a memory card game and it works until I try to click on the cards too fast. When I open two cards, I am calling compareCards function which adds document.body.style.pointerEvents = "none"; but obviously I can click on the third card if I am fast enough. How can I fix it? Here is my full JS code, note that class .flip adds pointer-events: none; among other things while .match adds short animation. I guess it probably has something to do with setTimeouts but I need them in order to show animatioins.
const playBtn = document.querySelector(".intro button");
const restartBtn = document.querySelectorAll(".restartBtn");
const introScreen = document.querySelector(".intro");
const game = document.querySelector(".game");
const gameContainer = document.querySelector("#gameContainer");
const timer = document.querySelector(".timer span");
const moves = document.querySelector(".moves span");
let time,
minutes = 0,
seconds = 0;
let numberOfMoves = 0;
moves.innerHTML = numberOfMoves;
let openCards = [];
let matchedCards = [];
function startGame() {
let shuffledDeck = shuffle(deckCards);
for (let i = 0; i < shuffledDeck.length; i++) {
const card = document.createElement("div");
card.classList.add("card");
const image = document.createElement("img");
image.setAttribute("src", "img/" + shuffledDeck[i]);
card.appendChild(image);
gameContainer.appendChild(card);
}
runTimer();
}
const deckCards = [
... images to add to game ...];
gameContainer.addEventListener("click", function (e) {
if (e.target.className === "card") {
flipCard();
}
function flipCard() {
e.target.classList.add("flip");
addCard();
}
function addCard() {
if (openCards.length == 0 || openCards.length == 1) {
openCards.push(e.target.firstElementChild);
}
compareCards();
}
});
function compareCards() {
if (openCards.length == 2) {
document.body.style.pointerEvents = "none";
}
if (openCards[0].src == openCards[1].src && openCards.length == 2) {
cardsMatched();
} else if (openCards[0].src !== openCards[1].src && openCards.length == 2) {
cardsNotMatched();
}
}
function countMoves() {
numberOfMoves++;
moves.innerHTML = numberOfMoves;
}
function cardsMatched() {
setTimeout(function () {
openCards[0].parentElement.classList.add("match");
openCards[1].parentElement.classList.add("match");
matchedCards.push(...openCards);
document.body.style.pointerEvents = "auto";
gameWon();
openCards = [];
}, 500);
countMoves();
}
function cardsNotMatched() {
setTimeout(function () {
openCards[0].parentElement.classList.remove("flip");
openCards[1].parentElement.classList.remove("flip");
document.body.style.pointerEvents = "auto";
openCards = [];
}, 500);
countMoves();
}
function gameWon() {
if (matchedCards.length == 16) {
stopTimer();
showModal();
}
}
const modal = document.querySelector(".modal");
function showModal() {
const closeModal = document.querySelector(".closeBtn");
modal.style.display = "block";
closeModal.addEventListener("click", () => {
modal.style.display = "none";
});
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
}
function resetEverything() {
modal.style.display = "none";
stopTimer();
timer.innerHTML = `00:00`;
numberOfMoves = 0;
moves.innerHTML = numberOfMoves;
matchedCards = [];
openCards = [];
startGame();
}
function shuffle(array) {
let currentIndex = array.length,
randomIndex;
while (currentIndex != 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [
array[randomIndex],
array[currentIndex],
];
}
return array;
}
function runTimer() {
time = setInterval(() => {
seconds++;
if (seconds == 60) {
minutes++;
seconds = 0;
}
timer.innerHTML = `${minutes < 10 ? `0${minutes}` : minutes}:${
seconds < 10 ? `0${seconds}` : seconds
}`;
}, 1000);
}
function stopTimer() {
seconds = 0;
minutes = 0;
clearInterval(time);
}
playBtn.addEventListener("click", () => {
introScreen.classList.remove("fadeIn");
introScreen.classList.add("fadeOut");
game.classList.add("fadeIn");
startGame();
});

What you're running into is a common problem where it takes time for things like CSS to propagate through the website, especially when you have timeouts. What you should do is VERY RARELY rely on CSS classes for your logic and let CSS be what it's meant to be: a purely visual medium.
The solution is simple. Instead of relying on pointer events, set up a flag that toggles whether the user is allowed to click on something or not, and then reference that flag for all your logic. This allows you to decouple what you see from what's happening underneath the hood. Something like this (only the relevant bits):
let canAction = true; // add a flag
function startGame() {
// ... start game logic
canAction = true; // set the flag to allow actions
}
gameContainer.addEventListener("click", function (e) {
if (canAction) {
// ... card click logic
}
});
function compareCards() {
if (openCards.length == 2) {
canAction = false; // stop user from taking further action
}
// ... rest of compare card logic
}
function cardsMatched() {
canAction = true; // re allow the user to click on cards - put this inside the setTimeout or outside depending on what you need
setTimeout(function () {
// ...
}, 500);
countMoves();
}
function cardsNotMatched() {
canAction = true; // re allow the user to click on cards - put this inside the setTimeout or outside depending on what you need
setTimeout(function () {
// ...
}, 500);
countMoves();
}
Of course you are free to keep the pointer-events CSS stuff as well, but don't rely on it for your logic. You'll just be inviting a whole lot of messy situations like this.

I have two independently working functions - I cannot get them to work together

I have two independent functions one to build a carousel and one to detect swipe Left or Right.
I cannot seem to find a way to use the function which navigates through the carousel into my Swipe Left or Right function (or vice versa).
I am at the end of my JS coding limits and struggling.
Here is the except:
this.doSomething = (event) => {
if (this.whatGestureDirection() == 'L') {
hpCarousel.move(-1);
} else {
hpCarousel.move(1);
}
}
I have tried alternatives; having google'd around there is a bind method. However, this is a bust too.
this.doSomething = (event) => {
if (this.whatGestureDirection() == 'L') {
let bindTheFunc;
bindTheFunc.bind(hpCarousel.move(-1));
return bindTheFunc;
} else {
let bindTheFunc;
bindTheFunc.bind(hpCarousel.move(1));
return bindTheFunc;
}
}
window.addEventListener('load', () => {
const hpCarousel = new carousel('area', 1);
const hpCarouselSwipe = new getSwipeX({elementId: 'homepage_carousel_wrapper'});
})
function getSwipeX({elementId}) {
this.e = document.getElementsByClassName(elementId)[0];
this.initialPosition = 0;
this.lastPosition = 0;
this.getTouchStart = (event) => {
event.preventDefault();
if (window.PointerEvent) {
this.e.setPointerCapture(event.pointerId);
}
return this.initalTouchPos = this.getGesturePoint(event);
}
this.getTouchMove = (event) => {
event.preventDefault();
return this.lastPosition = this.getGesturePoint(event);
}
this.getTouchEnd = (event) => {
event.preventDefault();
if (window.PointerEvent) {
this.e.releasePointerCapture(event.pointerId);
}
this.doSomething();
this.initialPosition = 0;
}
this.getGesturePoint = (event) => {
this.point = event.pageX
return this.point;
}
this.whatGestureDirection = (event) => {
const diffInPosition = this.initalTouchPos - this.lastPosition;
return (Math.sign(diffInPosition) > 0 ) ? `L` : `R`;
}
this.doSomething = (event) => {
if (this.whatGestureDirection() == 'L') {
**hpCarousel.move(-1);**
} else {
**hpCarousel.move(1);**
}
}
if (window.PointerEvent) {
this.e.addEventListener('pointerdown', this.getTouchStart, true);
this.e.addEventListener('pointermove', this.getTouchMove, true);
this.e.addEventListener('pointerup', this.getTouchEnd, true);
this.e.addEventListener('pointercancel', this.getTouchEnd, true);
}
}
I have a carousel script which a SO user kindly helped me with last week. It works great.
function carousel(id, index) {
this.slideIndex = index;
let carousel = document.getElementById(id);
this.slides = [...document.getElementsByClassName('homepage_carousel')];
let prev = carousel.getElementsByClassName('prev')[0];
let next = carousel.getElementsByClassName('next')[0];
prev.addEventListener('click', () => {
this.move(-1);
});
next.addEventListener('click', () => {
this.move(1);
});
this.hideAll = () => {
this.slides.forEach((slide) => {
slide.style.display = 'none';
});
};
this.show = () => {
this.hideAll();
this.slides[this.slideIndex - 1].style.display = 'flex';
}
this.move = (amount) => {
this.slideIndex += amount;
this.slideIndex = (this.slideIndex > this.slides.length) ? 1 : (this.slideIndex < 1) ? this.slides.length : this.slideIndex;
this.show();
}
this.show();
}

you can pass hpCarousel into hpCarouselSwipe as an argument.
window.addEventListener('load', () => {
const hpCarousel = new carousel('area', 1);
const hpCarouselSwipe = new getSwipeX({elementId: 'homepage_carousel_wrapper', carousel:hpCarousel});
})
function getSwipeX({elementId,carousel}) {
...
this.hpCarousel = carousel
}
And then later:
this.doSomething = (event) => {
if (this.whatGestureDirection() == 'L') {
this.hpCarousel.move(-1);
} else {
this.hpCarousel.move(1);
}
}
I did not test it, but it should work. You can pass a function into another function.

Can someone help me write this in javascript

I am trying to write this code in javascript from jquery
I already tried but cant seems to get equivalent to work.
$(document).ready(function() {
$('a').click(function() {
var selected = $(this);
$('a').removeClass('active');
$(selected).addClass('active');
});
var $a = $('.a'),
$b = $('.b'),
$c = $('.c'),
$d = $('.d'),
$home = $('.home'),
$about = $('.about');
$a.click(function() {
$home.fadeIn();
$about.fadeOut();
});
$b.click(function() {
$home.fadeOut();
$about.fadeIn();
});
});
The code works perfect in jQuery, but am trying to just use javascript. Its basically to add and remove class when a nav item is selected. I don't know if am explaining as clear as possible but am try to write the equivalent of this in javascript.
This is what I have tried.
var callback = function(){
var clickHandler1 = function() {
document.getElementById("home").classList.remove("home");
//var rem = document.getElementById("home");
//fadeOut(rem);
//alert("I am clicked B");
};
var anchors1 = document.getElementsByClassName("b");
for (var i = 0; i < anchors1.length; i++) {
var current = anchors1[i];
current.addEventListener('click', clickHandler1, false);
}
function fadeOut(el){
el.style.opacity = 1;
function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
fadeIn(el, display){
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
}
if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}

The code in es6:
window.onload = function() {
const allLinks = document.querySelectorAll('a')
console.log(allLinks)
const removeAllClass = () => {
allLinks.forEach(link => {
link.classList.remove('active')
})
}
allLinks.forEach(element => {
element.addEventListener('click', event => {
removeAllClass()
element.classList.add('active')
})
})
let $a = document.querySelectorAll('.a'),
$b = document.querySelectorAll('.b'),
$home = document.querySelector('.home'),
$about = document.querySelector('.about');
$a.forEach(element => {
element.addEventListener('click', event => {
$about.classList.remove('fadeIn');
$home.classList.add('fadeIn');
})
})
$b.forEach(element => {
element.addEventListener('click', event => {
$home.classList.remove('fadeIn');
$about.classList.add('fadeIn');
})
})
}
you can see working on https://codepen.io/rwladyka/pen/qBBBpvy

document.getElementsByClassName('a') is the javascript equivalent of $('.a')

Check if scrollIntoView is completed

I am using the following function in a single page application in Angular. When I click on the menu item, I scroll to the relevant div.
scroll (el) {
this.sharedService.isClicked.next(true);
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
How do I check if the element has finished scrolling? I want to avoid the setTimeout function.

hope this helps..
var scrollIntoviewCompleted = false;
var currentVisible = false;
var onceVisible = false;
$(window).scroll(function(){
$.fn.isOnScreen = function(){
var element = this.get(0);
var bounds = element.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
if ($('.targetdiv').isOnScreen()) {
currentVisible = true;
onceVisible =true;
}
else
{
currentVisible = false;
}
if(onceVisible == true && currentVisible == false){
scrollIntoviewCompleted = true;
console.log("scrollIntoViewCompleted");
}
});

Based on an answer in this question I was able to make this for my tests... and this assumes that you are #Injecting window into your angular components
let win: Window;
const onScrollEnd = (fn: () => void): void => {
let scrollTimeout: number | undefined;
const listener = (): void => {
win.clearTimeout(scrollTimeout);
scrollTimeout = win.setTimeout(() => {
win.removeEventListener('scroll', listener);
fn();
}, 100);
};
win.addEventListener('scroll', listener);
};
beforeEach(() => {
//Standard component test setup stuff goes here...
win = TestBed.get('Window');
});
And then in my test I can do this:
it('should scroll the window down when...', (done: DoneFn) => {
component.shouldScroll = true;
fixture.detectChanges();
onScrollEnd(() => {
expect(win.scrollY).toBeGreaterThan(0);
done();
});
});

This worked for me (I declare this snippet public domain, feel free to re-use):
scrollAndDo = function(currPageXOffset,currPageYOffset) {
$('#SomeElement')[0].scrollIntoView({behavior: 'smooth',block:'nearest',inline: 'nearest'});
currPageXOffset = window.pageXOffset;
currPageYOffset = window.pageYOffset;
var scrollDone = setInterval(function () {
if ( currPageXOffset == window.pageXOffset && currPageYOffset == window.pageYOffset ) {
clearInterval(scrollDone);
console.log('I have finished scrolling');
}
currPageXOffset = window.pageXOffset;
currPageYOffset = window.pageYOffset;
},50);
};
scrollAndDo();