Stop a running loop by clicking a button in JavaScript [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
I want to create a code that loops over an array and prints its index. I have created buttons to Stop (to stop the loop) & Start (to start the loop) the loop.
I have tried to achieve this by creating a condition that checks over a variable stop, If its value is 1 the look should stop, however, this condition doesn't work.

you can use recursive method and settimeout to set loop time (if needed)
let isStatus = false;
let index = 0;
function myLoop(){
console.log(index++)
setTimeout(function() {
if(isStatus) {
myLoop()
}
}, 800)
}
function start(){
index = 0
isStatus = true;
myLoop()
}
function pause(){
isStatus = false;
}
function resume(){
isStatus = true;
myLoop()
}
<button onClick="start()">start</button>
<button onClick="pause()">pause/stop</button>
<button onClick="resume()">resume</button>

Related

How to escape 2 functions at the same time in Javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Does anyone know how does this if statement "escape 2 functions at the same time"
client.on('message', message => {
if (Math.floor(Math.random()*20) === 19) return;
//rest of code
}
Like it escapes its if check and the .on message event.
Also, this is probably a dupe, but I couldn't find what I was looking for or didn't know what to search for.
Just to add, an analogy would be like when you use break; + labels: to stop a loop from going on. See, if I used a return; it would only stop the if statement (in the below code ofc), and the for loop would continue. But if I used a break start; it would also stop the for loop, this is what am trying to do.
start: {
for (var i = 0; i > x; i++) {
if (x === 1) {
break start;
}
//code
}
}
You can't escape the if condition. If you want this to do nothing, then simply return.
client.on('message', message => { return; })
// or, more concisely
client.on('message', () => {})
But this is a strange thing to do, unless you were trying to override the on callback method. But I assume is an event emitter that can have multiple subscribers, so that doesn't make sense either.
I guess what you want do is to detach your listener from emitter on certain condition. You would have to change your calls a little: add a function name and you will be able to adress it its body. Then you just detach your listener when your condition is met:
client.addListener('message', function onMessage(message) {
if (Math.floor(Math.random()*20) === 19) {
client.removeListener('message', onMessage);
}
}

How can I solve this problem with the screen touches? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I would like you to tell me if there is an event that returns to me when it was the last time a user touched the screen, since I need a function to run 3 seconds after the user touched the screen for the last time
There's no specific event for your use-case. What you can do however is adding a click event listener to your window object and assign the current time to a global variable as soon as someone clicked the screen. Additionally you have to use JavaScript's setInterval() method, which executes a function periodically e.g. every 20 ms. Inside it's callback function you can compare the current time to the time stored in the global variable and if the difference is bigger than 3000 trigger your action.
Here's an example (just click 'Run code snippet'):
var timeClicked;
function screenClicked() {
timeClicked = new Date();
}
function check() {
if (timeClicked != null) {
if (new Date() - timeClicked > 3000) {
clearInterval(interval);
alert("time's up!");
}
}
}
window.addEventListener("click", screenClicked);
var interval = setInterval(check, 20);
<body bgcolor="#eeeeee"><span>click anywhere inside this window</span></body>

Complicated repeated function [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Please Help me to solve this complicated loop. I’m calling 5 API URL but each of them should be called on a specific number of times then it should start to second, third, fourth and fifth URL and start again from top to bottom again and gain.
https://www.example1.com should be called 4 times
https://www.example2.com should be called 10 times
https://www.example3.com should be called 8 times
https://www.example4.com should be called 9 times
https://www.example5.com should be called 6 times
Should end on https://www.example5.com and again start from top https://www.example1.com
Unstoppable loop.
I highly Thanks & appreciate that anyone which answers this.
My code:
This is what I have tried so fo
The result of the code is commented inside the above code.
Use a variable as counter for each function like below,
var numberOfExecution=0;
function1(); // Start the procedure
function1()
{
// do api call
.......
// after finishing your task, check if this function execution hits desired number
numberOfExecution++;
if(numberOfExecution==4)
{
numberOfExecution=0;
function2();
}
else
{
function1();
}
}
function2()
{
// do api call
.......
// after finishing your task, check if this function execution hits desired number
numberOfExecution++;
if(numberOfExecution==6)
{
numberOfExecution=0;
function3();
}
else
{
function2();
}
}
In these process, one after another execution will continue achieving desired number of execution.

Uncaught TypeError: Cannot set property 'innerHTML' of null countdown timer [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am a JavaScript newbie, I am trying to build a simple countdown timer that counts down only in seconds. It is showing uncaught type error for x. Which what I think means that the function is not recursing. The code is as below:
function timer(x, elem){
var elem = document.getElementById(elem);
elem.innerHTML = x;
if (x > 0) {
setTimeout(timer(x-1, elem),1000);
}
}
You have two issues:
You are overwriting the value of elem to be a DOM element, and then trying to reuse it as if it were still a string
setTimeout expects a function that it can call every 1000 ms. Instead you are calling a function and passing the result to setTimeout. The distinction is a little confusing, but it may help to see it separated out into another variable:
This is what you are currently doing
var myFuncResult = timer(x-1, elem); // this returns the result of the function
setTimeOut(myFuncResult, 1000);
Instead you want
var myFunc = function() { timer(x-1, elem) }; // this returns a function that can be called
setTimeOut(myFunc, 1000);
Of course you can put the function directly into setTimeout, like you attempted to do.
The following does what you want (Hit "Run"):
function timer(x, elem){
var DOMelem = document.getElementById(elem);
DOMelem.innerHTML = x;
if (x > 0) {
setTimeout(function() {
timer(x-1, elem)
},1000);
}
}
timer(10, "my-timer");
<div id="my-timer"></div>

JavaScript Logic With Timing and Events [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Have a broad algorithmic question regarding the Flow of Logic using setTimeout() and Events .onclick() in JavaScript.
Basic Procedure:
When a button is clicked 2 times within 3 seconds, a HTML element
(currently visible) dissapears, following this, when the same button
is pressed the image reappears and the process repeats
What would be the best way to come about this problem? Outline of code is appreciated.
Have been working on this for several hours now, my code written is logically incorrect and would not be much good use.
I hope this could help:
http://jsfiddle.net/kqzdn8xe/
$(document).ready(function(){
$('#button1').click(function(){
if (typeof(this.visibleFlag) == 'undefined') {
this.visibleFlag = true;
}
var thisTimeClick = Date.now();
if (this.prevClick && (thisTimeClick - this.prevClick < 3000) && this.visibleFlag) {
this.visibleFlag = false;
$('#div1').hide();
} else if (!this.visibleFlag) {
this.visibleFlag = true;
$('#div1').show();
}
this.prevClick = thisTimeClick;
});
});
I believe you are after something like this;
I have also included logic to ignore the case of a 3rd successive click (within 500ms of the 2nd one), as I assume you are after double click like behavior.
It would be worth also looking at the jQuery double click event: https://api.jquery.com/dblclick/
<button id="buttonExample">Click me</button>
<br/>
<div id="imageContainer">Image</div>
<script type="text/javascript">
$('#buttonExample').click(function(){
var timeNow = new Date().getTime();
var lastClicked = parseInt($('#buttonExample').data("lastClicked")||0);
var ms = timeNow - lastClicked;
if($("#imageContainer").is(":visible")) {
if(ms < 3000) {
$("#imageContainer").hide();
}
$('#buttonExample').data("lastClicked", timeNow);
}else if(ms > 500){
$("#imageContainer").show();
}
});
</script>

Categories

Resources