Develop Reference

How can I make the webpage slow down autoscrolling on a button press?

As the title says - I'm looking to add some auto-scrolling on a specific webpage but the script that I have at the moment stops it completely from scrolling, which doesn't look visually appealing during presentations IMHO.
Is there a possibility to slow down instead of harshly stopping the auto-scrolling of the webpage on a specific keystroke?
This is the JS that I tried.
let scrollerID;
let paused = true;
let speed = 2; // 1 - Fast | 2 - Medium | 3 - Slow
let interval = speed * 5;
function startScroll(){
let id = setInterval(function() {
window.scrollBy(0, 2);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// Reached end of page
stopScroll();
}
}, interval);
return id;
}
function stopScroll() {
clearInterval(scrollerID);
}
document.body.addEventListener('keypress', function (event)
{
if (event.which == 13 || event.keyCode == 13) {
// It's the 'Enter' key
if(paused == true) {
scrollerID = startScroll();
paused = false;
}
else {
stopScroll();
paused = true;
}
}
}, true);
Thanks in advance!

html5 currentTime and volume changes not taking effect

I must be doing something wrong. Trying to set arrow hotkeys for videos to skip through the timeline and adjust the volume. Console logs return the desired new values, but they are not set.
document.onkeydown = function(e) {
var vid = document.getElementsByTagName('VIDEO');
if (vid.length) {
var vol = vid[0].volume;
var time = vid[0].currentTime;
var start = vid[0].seekable.start(0) + 10;
var end = vid[0].seekable.end(0) - 10;
if (e.keyCode === 37) {
if (start < time) {
time = time - 10;
console.log(time);
}
e.preventDefault();
}
if (e.keyCode === 38) {
if (vol < 1.0) {
vol = vol + 0.1;
console.log(vol);
}
e.preventDefault();
}
if (e.keyCode === 39) {
if (time < end) {
time = time + 10;
console.log(time);
}
e.preventDefault();
}
if (e.keyCode === 40) {
if (0.0 < vol) {
vol = vol - 0.1;
console.log(vol);
}
e.preventDefault();
}
}
};

You are not updating the vid.
Let's take an instance for volume updation.
What's happening here is you are taking value out of vol[0].volume into another variable 'volume' and upon event you are updating volume as a variable not vid, which you are using actually. Same goes for other keys (start, end and time).
Update vid as well.

trigger key after x seconds (key is constantly pressed)

The code works in the following way:
- holding shoot/drop button generate bullet and the bomb that is drawn/shown in canvas,
- it executes all the time in the function draw that refreshes around 60times per second.
Instead I want to set sth as:
- setInterval(shoot, 1000);
- setInterval(drop, 2000);
so it should be like:
- when user presses the key, it creates the bullet/bomb with the interval of 1/2 seconds
- it should all happen without realising the key
Below I provide the sample code:
let left = false;
let up = false;
let right = false;
let down = false;
let shoot = false;
let drop = false;
document.onkeydown = function (e) {
if (e.keyCode == 37) left = true;
if (e.keyCode == 38) up = true;
if (e.keyCode == 39) right = true;
if (e.keyCode == 40) down = true;
if (e.keyCode == 17) shoot = true;
if (e.keyCode == 32) drop = true;
e.preventDefault();
}
document.onkeyup = function (e) {
if (e.keyCode == 37) left = false;
if (e.keyCode == 38) up = false;
if (e.keyCode == 39) right = false;
if (e.keyCode == 40) down = false;
if (e.keyCode == 17) shoot = false;
if (e.keyCode == 32) drop = false;
e.preventDefault();
}
function draw() {
requestAnimationFrame(draw);
if (shoot) {
bullet = new Bullet(player.x - 3, player.y - 3, 6, 10)
bullets.push(bullet);
}
for (i = 0; i < bullets.length; i++) {
bullets[i].show();
bullets[i].move();
}
if (drop) {
bomb = new Bomb(player.x - 8, player.y + 50, 16, 1)
bombs.push(bomb);
}
for (i = 0; i < bombs.length; i++) {
bombs[i].show();
bombs[i].move();
}
}
requestAnimationFrame(draw);
Full code on remote server:
https://stacho163.000webhostapp.com
Is that a way to do it in my code or i have to change the way the buttons work?
If there is a solution without jQuery, that would be great.
e: checked the first tip, but after creating the first single bullet/bomb it's working as it was before.
Thank you for your tips :)

You should set some sort of wait variable, that indicates that the key is currently pressed, and no processing needs to take place:
let dropping = false;
// indicates that the bomb is dropping right now. Do not drop a new bomb
//...
if (e.keyCode == 32) {
drop = true;
dropping = true;
setTimeout(function () { dropping = false; }, 1000);
// if 1 second has passed, reset the dropping variable, to allow another bomb to drop
}
//...
if (drop && !dropping) {
bomb = new Bomb(player.x - 8, player.y + 50, 16, 1)
bombs.push(bomb);
}
This way, your bomb will only drop once every 1 second. Rinse and repeat :)

Javascript setInterval unwanted pause

I am trying to create an animation with a few images in javascript and I have the code working, but after it runs through images in reverse then it pauses slightly before it starts going forward again. I'm wondering how I get rid of the pause?
Here is the code in action http://isogashii.com/projects/javascript/ch10/dp10-6.html
HTML
<img id="pin" src="assets/pin0.gif" alt="pin animation" />
Javascript
var pin = new Array(9);
var curPin = 0;
var x = false;
// caching images
for (var imagesLoaded=0; imagesLoaded < 9; ++imagesLoaded) {
pin[imagesLoaded] = new Image();
pin[imagesLoaded].src = "assets/pin" + imagesLoaded + ".gif";
//starts pinF function when all images are cached
if (imagesLoaded == 8) {
setInterval("pinF()", 120);
}
}
function pinF() {
if (x == true) {
--curPin;
if (curPin == 0) {
x = false;
}
}
if (x == false) {
++curPin;
if (curPin == 8) {
x = true;
}
}
document.getElementById("pin").src = pin[curPin].src;
}

in the x == true portion of the if statement, you should set the curPin to be one otherwise you are duplicating the curPin = 1.
http://jsfiddle.net/A77cx/
function pinF() {
if (x == true) {
--curPin;
if (curPin == 0) {
curPin = 1;
x = false;
}
}
if (x == false) {
++curPin;
if (curPin == 8) {
x = true;
}
}
document.getElementById("pin").src = pin[curPin].src;
}

Currently, you do two "frames" of pin1. Change the logic of pinF not to do that.
To be specific, the first time x == true and curPin == 2, the first if executes, reducing curPin to 1.
The second time, x == true still, the first if brings curPin down to 0 and inverts x. Then, the second if increments curPin back to 1.

How to limit query function runs with while looping?

For the last days I've been working on a stimulus presentation function. Now it's the details that need adjustment, in particular im stuck with this:
I want my keypress event to be executed only 20 times, after which an alert states that the task is over. I tried for looping and while. I've probably lost the overview to see my fault, but my code doesn't stop after 20 key presses. Where is my mistake?
var i=0;
while (i < 20) {
$(function(){
$(document).keypress(function(e){
if ($(e.target).is('input, textarea')) {
return;
};
if (e.which === 97 || e.which === 108 || e.which === 32) {
if(Math.random() < 0.5) {
var new_word = stim[Math.floor((Math.random()*stim.length)+1)].name;
$("#abc").text(new_word);
} else {
var new_img = stim[Math.floor((Math.random()*stim.length)+1)].path;
$("#abc").empty();
var prox_img = $('<img id="abcimg" height="300px" width="300px">');
prox_img.attr('src', new_img);
prox_img.appendTo('#abc');
}
};
});
});
i++;
alert("abcdefg");
};

You dont need loop, just use global counter, i for example
var i = 0; // saves count of keypress events
$(function() {
$(document).keypress(function(e) {
if ($(e.target).is('input, textarea') || i > 20) { // check for 20 events
return;
};
i++; // increase counter...
if (e.which === 97 || e.which === 108 || e.which === 32) {
if(Math.random() < 0.5) {
var new_word = stim[Math.floor((Math.random()*stim.length)+1)].name;
$("#abc").text(new_word);
} else {
var new_img = stim[Math.floor((Math.random()*stim.length)+1)].path;
$("#abc").empty();
var prox_img = $('<img id="abcimg" height="300px" width="300px">');
prox_img.attr('src', new_img);
prox_img.appendTo('#abc');
}
}
});
});

You need to remove the event when the loop is finished executing, else the event remains attached to the document.
$(document).off("keypress");