We Keep Coding

Stop the running script

I run a script in the browser that scrolls the page down. I run it from the browser console (ctrl + shift + j).
var popWys = 0;
var terazWys = 0;
var proba = 0;
function scrollowanie() {
if(popWys == document.body.scrollHeight)
{
proba++;
if(proba > 10)
{
window.alert("To juz chyba wszystko, w razie czego odpal ponownie.");
return;
}
}
else
{
proba = 0;
}
popWys = document.body.scrollTop;
terazWys += 1000;
window.scrollTo(0,terazWys);
setTimeout(scrollowanie, 100);
}
setTimeout(scrollowanie, 100);
Question. How to stop it at any time from the command line? Can I write something, press to stop? Sam will never stop and blocks the browser. I tried with different: return; break; Stop. anything and nothing works.
Can it be done at all?

You can use clearTimeout([variable name]) to stop the setTimeout(scrollowanie, 100);
Just assign setTimeout(scrollowanie, 100); to global variable like following:
globalVar = setTimeout(scrollowanie, 100);
And in the console type clearTimeout(globalVar) and the execution will finish

You could wrap desired behaviour in an object that handles the process.
e.g.:
var script = (function () {
var timeout;
var DESIRED_TIME = 100;
function scrollowanie() {
console.log('::Testing');
// Desired behaviour here
clearTimeout(timeout);
timeout = setTimeout(scrollowanie, DESIRED_TIME)
}
return {
start: function() {
timeout = setTimeout(scrollowanie, DESIRED_TIME);
},
stop: function () {
clearTimeout(timeout);
}
}
})();
Then in the command line you will just need to start the process
script.start();
and to end it
script.stop();

update a delayed function in javascript

I have a simple javascript function that loads on document ready:
var start = 1;
var speed = 1000;
$(document).ready(function () {
go();
setInterval(function () {
go();
}, speed);
This is the function in details:
function go() {
$("#score").html(start.toLocaleString());
start += 1;
}
This is basically a counter which starts from number 1 to infinite, at 1000 milliseconds speed. Here is the thing , now: I have another function:
function modify() {
speed = 500;
}
which regulates the setIntval speed on the main function. The problem is it applies on page refresh only. How do I update it in real time without refreshing page?

You can't update the current one, you have to stop it and set a new timer, which does the same but with a different delay.
var speed = 1000;
var start = 1;
function go() {
$("#score").html(start.toLocaleString());
start += 1;
}
function startGoTimer(){
return = setInterval(function () {
go();
}, speed);
}
function modifyTimer( previousTimer, newDelay=500) {
clearInterval(previousTimer);
speed = newDelay;
startGoTimer();
}
var timer = startGoTimer();
// Some code
modifyTimer(timer, 500);
For fun I just tested what would hapopen if you just change the time:
var timing = 1000;
var interval = setInterval(function(){console.log("test")}, timing);
// Now we get a log every 1000ms, change the var after some time (via console):
timing = 10;
// still an interval of 1000ms.

A really simple solution is to make use of the setInterval's parameters,
var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);
and also pass the speed as param1.
Then, at each interval, check if it changed, and if, clear the existing timer and fire up a new.
Stack snippet
var start = 1;
var speed = 1000;
var timer;
$(document).ready(function() {
go();
timer = setInterval(function(p) {
go(p);
}, speed, speed);
// for this demo
$("button").click(function(){ speed = speed/2});
})
function go(p) {
if(p && p != speed) {
clearInterval(timer);
timer = setInterval(function(p) {
go(p);
}, speed, speed);
}
$("#score").html(start.toLocaleString());
start += 1;
}
div {
display: inline-block;
width: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">0</div>
<button>Modify</button>

Implement your own setInterval and clearInterval methods without using setTimeout/clearTimeout

I was asked in a phone interview to replicate Javascript's setInterval, clearInterval methods by writing my own. I am not allowed to use setTimeout or clearTimeout.
function setInterval(func, wait){
var currentTime = Date.now();
while(currentTime < wait){
currentTime = Date.now() - currentTime;
}
if(currentTime >= wait) {
func();
}
}
function clearInterval(myVar){
myVar = undeclared;
}

function setTimeout(func, ms, ...args){
const start = Date.now();
(function check(){
if(start + ms >= Date.now()){
func(...args);
} else {
requestAnimationFrame(check);
}
})()
}
You might use a pseudorecursive function and requestAnimationFrame to do this. Based on this setTimeout implementation without window.setTimeout you cane easily implement a new setInterval ...
PS: in node you can use process.nectTick instead of requestAnimationFrame

Another possibility is, taking example from here, the usage of Web Workers:
let mySetInterval = function(callback, timeout) {
let blob = new Blob([ "self.addEventListener('message', function(e) { \
let old_date = Date.now(); \
while (Date.now() - old_date <= " + timeout + ") {}; \
self.postMessage(true); \
}, false);" ], { type: "text/javascript" });
let worker = new Worker(window.URL.createObjectURL(blob));
worker.addEventListener("message", function(e) {
if (callback() === false) {
return
}
mySetInterval(callback, timeout)
}, false);
worker.postMessage(true);
};
var a = 0;
mySetInterval(() => { if (a >= 10) { return false } else { console.log(a++) } }, 1000)
console.log(45);
Every 1 second it updates the variable a with +1.
Like you see, in this way it is non-blocking and it will stop when the variable a is 10.
To clear the "interval", in this case simply return false inside the callback. Obviously is not the same as the clearInterval function! Here there is not something like an ID such as for the setInterval function.

Hard Task, you can sort of do what setInterval and setTimeout do with requestAnimationFrame ? Not the same, but could do what you want to do.
var time;
function repeatOften() {
$("<div />").appendTo("body");
time = requestAnimationFrame(repeatOften);
}
$("#start").on("click", function() {
time = requestAnimationFrame(repeatOften);
});
$("#stop").on("click", function() {
cancelAnimationFrame(time);
});

How to stop the jQuery's queue custom task which has setInterval() inside?

I have a custom animating effect task in jQuery queue. And there is a setInterval call inside it.
After some time the stop() function is being invoked. It removes the callback of currently executing task from the queue and starts executing the next one.
But setInterval from the previous effect (which already having been removed) is still running. Where should I place the clearInterval to be invoked after cancelling the task with calling the stop()?
Here is an example:
$('body')
.queue(function(next) {
var i = 0, el = this;
var interval = setInterval(function() {
el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
if (i > 5) {
clearInterval(interval);
next();
}
}, 1000);
})
.queue(function() {
this.style.backgroundColor = '#005';
});
setTimeout(function() {
$('body').stop();
}, 1500);
https://jsfiddle.net/coderlex/tLd9xtjj/

Move your interval variable instantiation outside of the queue closure function, then you can clear it whenever you call stop().
var interval = null;
$('body')
.queue(function(next) {
var i = 0, el = this;
interval = setInterval(function() {
el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
if (i > 5) {
clearInterval(interval);
interval = null;
next();
}
}, 1000);
})
.queue(function() {
this.style.backgroundColor = '#005';
});
setTimeout(function() {
$('body').stop();
if (interval != null) {
clearInterval(interval);
interval = null;
}
}, 1500);

Not sure about official support of this method, but after reading the jQuery sources it seems I've found the solution. There is an undocumented second argument given to the callback function of the queue task. That's the object of the current effect's hooks. The property we need named stop accordingly. If set, the closure is called only in case of manual effect stopping by stop() or finish() methods. It's not being called on clearing or setting new queue.
Here is an example:
$('body')
.queue(function(next, hooks) {
var i = 0, el = this;
var interval = setInterval(function() {
el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
if (i > 5) {
clearInterval(interval);
next();
}
}, 1000);
hooks.stop = function() {
clearInterval(interval);
}
})
.queue(function(next) {
this.style.backgroundColor = '#005';
next();
});
setTimeout(function() {
$('body').stop();
}, 1500);

how to add a delay in a while loop. JavaScript

function falling()
{
isFalling = true;
while (isFalling == true)
{
if (y < 120) {
y++;
}
else if (y == 120) {
isFalling = false;
}
}
}
I have tried adding setTimeout(function() around the entire loop, around the if statement, around the y++. I don't know what i'm doing wrong. Any time I add any of these the page becomes unresponsive once the falling function is called. I'm well aware that this is probably a duplicate question but the duplicate questions failed ti help.
{ }, 100)

You would do it like this:
function falling(y) {
if (y < 120) {
setTimeout(falling.bind(this, y + 1), 100); // specify your delay.
}
}
falling(0);
The question has indeed been answered several times, and the answers here are really not that different from this.
Note that I removed the apparently global variable isFalling. If you do need that variable in other code, then you can keep that variable updated as follows:
function falling(y) {
isFalling = y < 120;
if (isFalling) {
setTimeout(falling.bind(this, y + 1), 100); // specify your delay.
}
}

I would use window.setInterval() instead, as you want it to repeat until a certain number
working plunkr:
https://plnkr.co/edit/TbpplnIShiaJR7sHDUjP?p=preview
function falling()
{
var isFalling = true;
var y=0;
myInterval = window.setInterval(function() {
y++;
console.log(y);
if (y== 120) {
clearInterval(myInterval);
}
}, 100)
}
falling();

If the intent of calling falling() is to temporarily set the value of a global variable to true (as suggested by your current code), then this should do the trick.
var isFalling = false;
function falling(fallDuration) {
isFalling = true;
console.log("now falling");
setTimeout(function(){
isFalling = false;
console.log("landed");
}, fallDuration || 1000);
}
falling();
I imagine though that you might actually want to fall and then continue doing something else. In that case you probably want to look at a callback or into promises. You might do a simple:
var isFalling = false;
function falling(fallDuration, andThen) {
isFalling = true;
console.log("now falling");
setTimeout(function() {
isFalling = false;
console.log("landed");
andThen();
}, fallDuration);
}
falling(1000, function(){ console.log("now standing"); });