Develop Reference

Stop a setInterval inside its callback [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 4 months ago.
Improve this question
Does anyone have any idea how to stop an interval that is situated inside of a function once it's done doing its thing?
Here is what I mean:
function renderMessage(message) {
const renderInterval = setInterval(() => {
characterIndex++;
dealerMessage.innerHTML = `
${messages[message].slice(0, characterIndex)}
`;
if (characterIndex === messages[message].length) {
clearInterval(renderInterval)
}
}, 100);
}
As you can see, I'm trying to render out a message using this function. It does its job fine, but if I don't stop it, subsequent messages keep overriding themselves...
I've tested the if check and it is actually functioning inside the function, yet for some reason the clearInterval doesn't work.
Is there any way I can fix this, or do you recommend me to start from scratch?
Note: this method would be very handy for me, so, if possible, I would like to keep it.

I think your 'if' statement of clearInterval should be
if (characterIndex===message[message.length]){}
Also, I cannot see any initialization of the characterIndex variable. Please do inform if this worked or not.

How to run an event function once [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a lot of questions its all on java script (with some jquery)
first im trying to detect the mouse X cordinates when the mousemove on an element :
(function() {
'use strict';
$('.AnyElement').mousemove(function (e) {
console.log(e.pageX)
});
})();
i want to detect the mouse X once i know theres a functions like mouseover etc...
but in general how to make this function run once and stop
Second when someone write :
if (document.body = 1) {
// do anything
}
he is checking if document.body equal to 1
i see a thing in someone else code i dont undertand here it is :
if (document.body) {
// do anything
}
it doesnt matter what the function do , the thing is what he is checking ???

In answer to your first question there are a few ways you could do it, one example would be to register the mousemove event and then remove the event after logging it once.
$('html').mousemove(function(e) {
console.log(e.pageX);
$('html').off('mousemove');
})
Another method could be use the one event listener built into jQuery.
$('html').one('mousemove',function(e) {
console.log(e.pageX);
});
In answer to your second question the first statement is looking for the length of the element, if the element exists it will generally be greater than 0. In the second statement document.body will return a boolean of true or false depending on whether or not the element exists. Again there are a million different ways you can do the same thing in Javascript.
Hope that helps!

Why use a while loop for a game loop? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
Just wondering, is there a specific reason to use a while loop as the game loop. Or could I use another method, like this one.
Note: this is not proper code, and has not been tested. This is just a general idea. This example is also not consistent to a specific coding language, but may follow mostly JavaScript because that's the coding language I know off the top of my head. I've actually tried something similar to this in dart (google flutter).
var startTime;
var running = false;
function loop1(){
startTime = system.currentMillis();
loop2();
}
loop2(){
gameUpdate();
//ignore my math, I did not focus on doing that property
//this is just an example and is not proper math
var delay = 1000 / (system.currentMillis() - startTime);
setTimeout(loop3, delay);
}
loop3(){
if(running){
loop1();
}
}
edit: could using something like this to avoid the need to use sleep(); be helpful to performance? (or phone battery)

It is perfectly possible to use your code as a main game loop. The reason why a while is preferred is because a main game loop executes endlessly until aborted, this is done simply with while (true) and aborting somewhere inside with break, or with while (abort == false) and setting abort = true somewhere inside. Notice that other loop variants such as for and do-while are more verbose, unless your language let's you do for (;;). Also note that you can restructure your proposed loop to a more simpler version using a while loop.

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>

Javascript appears to be saying true == false [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 8 years ago.
Improve this question
I have the following js function.
function showAttentionItem(sender)
{
debugger;
var assistanceRequired = sender.parent().hasClass("assistanceRequired");
if (assistanceRequired)
{
sender.children('.assistanceRequiredText').fadeToggle(0);
if (sender.children('.assistanceRequiredText').is(":visible"))
{
sender.children('.studentPerformanceText').hide();
}
}
if (!assistanceRequired)
{
if (sender.parent().hasClass("studentOutsideTargetRange"))
{
sender.children('.studentPerformanceText').fadeToggle(0);
}
}
}
What happens when I run it is, I hit the debugger line, and step through the code. assistanceRequired is true.
After executing sender.children('.studentPerformanceText').hide();, the next line it jumps to is sender.children('.studentPerformanceText').fadeToggle(0);, inside the if (!assistanceRequired) statement!
How could this possibly be happening?

This is guaranteed to work:
if (sender.parent().hasClass("assistanceRequired"))
{
// do whatever here
}
else
{
// do whatever ELSE here
}
Only one or the other can ever run when coded correctly since there is only one test and it will either be true or false the single time it is tested. There is no possibility for it to be changed by some side effect you are not aware of, which is most likely what is happening. This is not debatable.
If this does not work the way you want then something else is wrong that you are not showing and without an executable jsFiddle good luck convincing anyone that a fundamental thing like the if ... else construct is broken.

I can think of only one scenario to explain what you are seeing.
There's a double trigggering of showAttentionItem(), which, in the debugger, is perceived as a single call. On the first call, assistanceRequired is true and on the second it's false.