We Keep Coding

javascript I have a sequence that runs continuously, but need it to stop when an image is clicked

I have very little to no knowledge when it comes to using JavaScript. I have 24 of the same image given an id from q1 - q24. my code allows for the 24 images to be changed to image2 one at a time, but I need for it to stop and display a text/alert when image2 is clicked.
<script>
{
let num = 1;
function sequence()
{
let back = 1;
while (back < 25)
{
if(back == 1)
{
document.getElementById("q24").src = "question.jpg";
}
else
{
document.getElementById("q" + (back-1)).src = "question.jpg";
}
back++
}
document.getElementById("q" + num).src = "question2.png";
num = num + 1;
if(num > 24){num = 1;}
}
setInterval(sequence, 500);
}
</script>

Save the interval timer to a variable. Then add a click listener to all the images that stops the timer if the current image is the one showing question2.jpg.
{
let num = 1;
for (let i = 1; i <= 24; i++) {
document.getElementById(`q${i}`).addEventListener("click", function() {
if (i == num) {
clearInterval(interval);
}
});
}
let interval = setInterval(sequence, 500);
function sequence() {
for (let i = 1; i <= 24; i++) {
if (i == num) {
document.getElementById(`q${i}`).src = "question2.jpg";
} else {
document.getElementById(`q${i}`).src = "question.jpg";
}
num = num + 1;
if (num > 24) {
num = 1;
}
}
}
}

While I don't fully understand your use case, you could create a click event listener on the document and check the target's src in it.
document.addEventListener('click', function(e) {
if (e.target.src === 'question2.png') {
alert('Clicked question 2');
}
});

requestFrameAnimation is choppy using duration

I'm writing a fadeIn function for an HTMLElement, the animation works but it's a bit choppy at the moment. what it does is animate a fadeIn from 0 opacity to 1, it also animates over a duration using requestFrameAnimation that's why it's probably so choppy, can someone help me make my animation run more smoothly. and example is on codepen.io look at the header fadeIn and see what I mean
fadeIn: function(duration) {
var el = this.$el,
duration,
end = 0;
el.style.opacity = 0;
el.style.display = "block";
var step = function() {
var current = +new Date(),
remaining = end - current;
if(remaining < 60) {
if(el) {
end = current + duration;
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
}
} else {
return;
}
}
requestAnimationFrame(step);
};
step();
},

The smoothest one you can do is using CSS transition. But if you want to do with pure Javascript, you can do something like this
function fadeIn(dom, duration) {
let start = null;
const step = (end) => {
if (start === null) start = end;
let dt = end - start;
dom.style.opacity = Math.min(1, dt / duration);
if (dt < duration) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
function fadeOut(dom, duration) {
let start = null;
const step = (end) => {
if (start === null) start = end;
let dt = end - start;
dom.style.opacity = Math.max(0, 1 - dt / duration);
if (dt < duration) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
fadeIn(document.getElementById('your_dom'), 2000);

Wait before function can be executed again

I'm playing around with some javascript and JQuery. I'm trying to do something specific each time the user scrolls. It works fine when I use a mouse with a scollwheel. But when I use the trackpad on my laptop it goes incredibly fast. I think it's because it executes the mousewheel function many times when scrolling. So I want to limit how often you can execute the function. Like with a 500ms delay between each call if the user keeps scrolling. It shouldn't delay the functions itself but run immediately and then wait 500ms before it can be executed again. Hope you understand.
Here's my code
$(window).bind('mousewheel', function(event) { // My mousewheel function.
if (event.originalEvent.wheelDelta >= 0) {
scroll(-1);
} else {
scroll(1);
}
});
/* Functions */
function scroll(dir) {
if (dir == -1) {
if (current > 0) {
current--;
}
} else {
if (current < list.size() - 1) {
current++;
}
}
var number = 100 * current;
var value = "translateY(-" + number + "vh)";
main.css("transform", value);
for (var i = 0; i < list.size(); i++) {
$('#nav li:nth-child(' + (i + 1) + ')').removeClass('active');
}
$('#nav li:nth-child(' + (current + 1) + ')').addClass('active');
}

You need to define a variable that indicate when to run the function or not. in this case is the "isScrolling" variable.
$(window).bind('mousewheel', function(event) { // My mousewheel function.
if (event.originalEvent.wheelDelta >= 0) {
scroll(-1);
} else {
scroll(1);
}
});
/* Functions */
var isScrolling = false; // This variable define when to run the function
function scroll(dir) {
if(isScrolling){
return;
}
isScrolling = true;
if (dir == -1) {
if (current > 0) {
current--;
}
} else {
if (current < list.size() - 1) {
current++;
}
}
var number = 100 * current;
var value = "translateY(-" + number + "vh)";
main.css("transform", value);
for (var i = 0; i < list.size(); i++) {
$('#nav li:nth-child(' + (i + 1) + ')').removeClass('active');
}
$('#nav li:nth-child(' + (current + 1) + ')').addClass('active');
setTimeout(function(){
isScrolling = false;
},500) // -> Here you can modify the time between functions call
}

What you need is a throttle function. This function wraps around other functions and checks the delay in ms and the id of the event.
/**
* #description delay events with the same id, good for window resize events, scroll, keystroke, etc ...
* #param {Function} func : callback function to be run when done
* #param {Integer} wait : integer in milliseconds
* #param {String} id : unique event id
*/
var throttle = (function () {
var timers = {};
return function (func, wait, id) {
wait = wait || 200;
id = id || 'anonymous';
if (timers[id]) {
clearTimeout(timers[id]);
}
timers[id] = setTimeout(func, wait);
};
})(),
You can use it like this:
$(window).on('mousewheel', function () {
throttle(function(){
var isScrollUp = event.originalEvent.wheelDelta >= 0 ? -1 : 1;
scroll(isScrollUp);
}, 500, 'my mousewheel event');
});
A nice example of underscore throttle -vs- debounce.

Fade out elements on page without jquery

I would like to fade out some elements on my page with javascript but without jquery. How should I do this onclick?

After our small discussion in the comments of your question you mentioned you were primarily targeting mobile devices. CSS transition, therefore, might be your best option as it's supported by all versions of iOS and Android and doesn't perform any expensive JavaScript loops.
Here's a fiddle of a working minimal implementation.
HTML:
fade
<div id="toFade">...</div>
CSS:
#toFade {
-webkit-transition: opacity 2s;
opacity: 1;
}
#toFade.faded {
opacity: 0;
}
Javascript:
document.getElementById('doFade').addEventListener('click', function() {
document.getElementById('toFade').className += 'faded';
});

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
taken from http://vanilla-js.com/

I guess you'd make your own fadeOut function?
function fade(element, speed) {
var op = 1,
timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, speed);
}
FIDDLE

If you're only targeting browsers that support CSS3 fade options, go for CSS3, but if not you'll want something like:
function addEvent(obj,event,func)
{
if(typeof func !== 'function')
{
return false;
}
if(typeof obj.addEventListener == 'function' || typeof obj.addEventListener == 'object')
{
return obj.addEventListener(event.replace(/^on/,''), func, false);
}
else if(typeof obj.attachEvent == 'function' || typeof obj.attachEvent == 'object')
{
return obj.attachEvent(event,func);
}
}
addEvent(elem,'onclick',function(e) {
var target = e.srcElement || e.target;
target.style.opacity = 1;
var fadeOutInt = setInterval(function() {
target.style.opacity -= 0.1;
if(target.style.opacity <= 0) clearInterval(fadeOutInt);
},50);
});
JSFiddle

CSS
.fade{
opacity: 0;
}
JavaScript
var myEle=document.getElementById("myID");
myEle.className += " fade"; //to fadeIn
myEle.className.replace( /(?:^|\s)fade(?!\S)/ , '' ) //to fadeOut

Restart setInterval each minute

To create a ticking movement and not a sliding one of a number on a canvas i want to move the number up in 0,2 secondes and wait 0,8 seconds. The codes works good for a sliding movement but to implement the ticking i get lost.
jsfiddle
var ittt = 0;
var add = null;
function MinuteTimer() {
add = setInterval(function () {
totime();
if (ittt % (40 * 60) == 0) {
ittt = 0;
}
}, 5);
};
function stoptimer() {
clearInterval(add);
};
function totime() {
drawcanvasbackground();
drawnumberscanvas(ittt);
ittt += 1;
if (ittt % 40 == 0 && ittt > 0) {
clearInterval(add);
setTimeout(MinuteTimer(), 800);
};
};