Switching between while loops with socket.io and express - javascript

I have an express app running socket.io on my raspberry pi which is controlling an LED panel. To drive the panel I have a while loop that is constantly updating the pixels in the panel. I want to be able to change the parameters of that loop or switch to a different loop altogether to control what animation the panel is displaying.
What is the best way to do this? When I have tried just passing a new socket.io message to the server the message isn't received because it is blocked by the loop. I can start the first animation this way but any subsequent messages are blocked.
I can provide code snippets if needed.

Instead of a loop, use a function that calls itself asynchronously at the end. This allows events like socket.io messages to be handled before the next function execution.
The HTML page below illustrates the idea. The loop increments a counter every second and by pressing the button, you can increase the increment.
<!DOCTYPE html><html>
<head>
<script type="text/javascript">
var counter = 0, increment = 1;
function loop() {
counter += increment;
document.querySelector("span").textContent = counter;
setTimeout(loop, 1000);
}
</script>
</head>
<body onload="loop()">
<span></span>
<button onclick="increment++">Count faster</button>
</body>
</html>
Here, setTimeout(loop) is "sufficiently asynchronous" to allow click events, whereas Promise.resolve().then(loop) would not be. As the comment below says, your code is needed for a judgment how it works for your events.

Related

clearInterval()-Method in JavaScript - How does it exactly work?

I have a script which waits for specific DOM-Elements to be loaded and when loaded it appends another HTML-Element:
var checkExistVOID = setInterval(function() {
if( $('#voidDocumentsAwaitingMyApproval').length && $('#voidDocumentsAwaitingMySignature').length ) {
$("#loadingBarPolarion1").hide();
$('<span style="font-size: 14px;"><i style="color: lightgreen; padding-right: 10px;" class="fas fa-check"></i>Currently no Document Actions required</span>').appendTo('#voidDocumentsAwaitingMyApproval');
clearInterval(checkExistVOID);
}
}, 500);
My aim was to only trigger this function once, that's why I used the Method:
clearInterval()
It seems to work fine at first glance, but if the site where the page is executed stays opened for about ~30 minutes without any user action, the append-function is all of a sudden executed every 500 ms on a loop:
I was wondering, what can be the issue of this? Is it possible that clearInterval() suddenly isn't "stored anymore"?
Can you suggest me what to change in my function in order to not run into this problem?
I was thinking about an additional check for the already exiting <span>-ELement and use that in the if-Function, but I guess that's not a professional solution :)
You're conditionally clearing the interval. If the condition is not met, the interval will not be cleared.
My aim was to only trigger this function once
You should use setTimeout() instead.

Constant reload of a DIV?

Ok, I've looked around Stack and other places for the past 4 or 5 hours trying to find a solution to my problem.
I have an Iframe inside of a page which contains 5 lines of information, the information is fetched from a database. Said info will constantly change, therefor a need it to be refreshed every 1-5 seconds, can stretch to 10 seconds if needs be.
I have used the below code, which works, but crashed my browser(s) for some reason, I'm guessing reloading too fast?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#info').load('mid.php');
}, 5000); // refresh every 5000 milliseconds
</script>
Below is the code from mid.php (There is PHP inside the page but this is the part that I need refreshing).
<div id="info"><font size="2">
<b>Crimes: </b><font color="white"><?php if ($fetch->lastcrime <= time()){ echo 'Ready'; }else{ echo "".maketime($fetch->lastcrime).""; } ?></font><br>
<b>GTA: </b><font color="white"><?php if ($fetch->lastgta <= time()){ echo 'Ready'; }else{ echo "".maketime($fetch->lastgta).""; } ?></font><br>
<b>Chase: </b><font color="white"><?php if ($fetch->last_chase < time()){ echo 'Ready'; }else{ echo "".maketime($fetch->last_chase).""; } ?></font><br>
<b>Extortion: </b><font color="white"><?php if ($fetch->last_ext < time()){ echo 'Ready'; }else{ echo "".maketime($fetch->last_ext).""; } ?></font><br>
<b>Rank:</b><?php echo "$fetch->rank"; ?></td></tr>
</div>
</table>
I know I can use HTML to refresh the Iframe but it looks unsightly when the whole top left corner of the screen refreshes every 3 seconds, any help is much appreciated.
Thanks
I'd expect you to use Ajax calls for this kind of thing. You'd tonally ice jQuery to update the contents of elements in place to avoid the refresh of your iframe. Iframes are limited in their capabilities and it typically doesn't make sense to use them just for updating web page contents.
The browser crash may be coming from the use of set internal. If the calls take longer than 5 seconds to complete, multiple calls might stack up. But for your case I feel like it's not the problem, as it should be able to update that orange pretty quick. Any way, a better approach is to set a timer for one execution of your update process every time it gets done running. That way, if the call does take too long, you don't just keep stacking up requests.
Use can use .load() callback, substitute setTimeout() for setInterval
$(document).ready(function() {
let timeout;
let duration = 5000;
let stop = false;
function update() {
$("#info").load("mid.php", function() {
if (timeout) {
clearTimeout(timeout)
}
if (stop === false) {
timeout = setTimeout(update, duration)
}
});
}
update();
});
Thanks.
I ended up using pretty much the same script, just splitting the PHP and HTML into separate files and calling the div from the HTML file.

SetInterval loop relatively confusing to me

HTML
<div id="backspace" ng-click="deleteString(''); decrementCursor();">
JS
<script>
$scope.deleteString = function() {
if($scope.cursorPosVal > 0){
//$scope.name = $scope.name - letter;
$scope.name = [$scope.name.slice(0, $scope.cursorPosVal - 1) + $scope.name.slice($scope.cursorPosVal)].join('');
console.log($scope.name);
setTimeout(function(){ setCaretPosition("inputBox", $scope.cursorPosVal); }, 30);
} else {
$scope.cursorPosVal = 1;
}
};
</script>
I am designing an on screen touchscreen keyboard. This is my backspace button. I am going to make it so that when you click and hold the backspace button, it starts removing characters automatically. I don't know where to begin with creating a setInterval, and I know a setInterval is exactly what I need to use here.
If I'm not wrong, you want that while you're keeping your button pressed, a function repeats itself.
You're right with setInterval(). However, the way you manage the event is wrong.
Take a look at this fiddle (It's not your code, but a simple example is the best way to understand):
http://jsfiddle.net/daq9atdd/1/
$(function(){
var interval = null;
$('#myButton').mousedown(function(){
interval = setInterval(function(){
console.log('Hello !');
}, 250);
});
$('#myButton').mouseup(function(){
clearInterval(interval);
});
});
I start the interval when the button is pressed, store it, and clear it when the button is released.
You’re so sure about setInterval.
If browser briefly hangs for whatever reason (say some background task), setInterval would go on queueing your backspace calls until it has some CPU time. This means user may see no change and hold backspace longer than needed, and then see a whole bunch of characters suddenly vanish when browser is back to normal.
Thus by setting a timeout after every call you’re making sure user won’t remove more characters than needed. Might be important if the goal is to improve UX.
Example implementation with AngularJS directives and setTimeout
See also:
setTimeout or setInterval?
noKid’s fiddle updated with setTimeout in mind

JavaScript Change Text in X Seconds - No Initial Display

I currently have a JavaScript file that will change the testimonial shown every five seconds. Everything works perfectly, except for the first five seconds, nothing appears. If I put a value where the JavaScript function is being called, it does show up initially, then is replaced by whatever the first testimonial is.
Here is the HTML code where the JavaScript is being called.
<html>
<head>
<SCRIPT language="JavaScript" SRC="textCycle.js"></SCRIPT>
</head>
<body>
<table border = 0><tr><td style="width:300px;"> <!-- Change the height in order to determine width of quotes -->
<div id="change"></div></td></tr></table>
</body>
</html>
Here is the Javascript:
var quotes=new Array(5);
var i = 0;
var authors=new Array(5);
//Load Quotes into array
quotes[0]="\"Website is awesome!\"";
quotes[1]="\"Love it!\"";
quotes[2]="\"Awesome site!\"";
quotes[3]="\"This site was very informative and helped with my problem.\"";
quotes[4]="\"Best site for helping with this issue.\"";
//Load authors that correspond with the quote array
authors[0]="Anonymous";
authors[1]="Anonymous";
authors[2]="Anonymous";
authors[3]="Anonymous";
authors[4]="Anonymous";
//Call the changeText() function every 5000 miliseconds
setInterval(changeText, 5000);
//Function that determine what quote and author to put in html.
function changeText(){
document.getElementById("change").innerHTML=(quotes[i] + '<p style="text-align: right"><i>' + authors[i] + '</i></p>');
if(i == 4)
i = 0;
else
i++;
}
Is this just a matter of changing the javascript file so that quotes[0] is outside of the loop?
Note: The values in the arrays were changed to keep it anonymous. These aren't real testimonials.
Just add changeText() (call your function) anywhere in your code before setInterval(). Well, it is not mandatory.
Fiddle
If you add the call to changeText() as mentioned, it likely still will not work. This is because the DOM has not been parsed yet. You should call it after the DOM is ready. One way to do this would be to put it in the onload event. This is the easiest way without a third-party library, but also waits until all images have been loaded. Here is an example:
<body onload="changeText()">
setInterval waits the interval duration (5 seconds) before executing the first time.
You could just call it once before setting the interval, and you'll be good to go. Eg:
//Call the changeText() function every 5000 miliseconds
changeText();
setInterval(changeText, 5000);

Automatically rotate through content

I have 7 graphs that are accessible to me through a web site. I want to develop my own web application that automatically cycles through each of these graphs, so I can display them on a huge monitor.
I want the functionality to be similar to an image carousel but it would be for web pages instead of images. What are my options? A jQuery plugin? AJAX and an iframe? Keep in mind that I want the data to be live while I display it.
You could use javascript, and a Frame with a simple timer to load it.
Nothing complex needed,
In the title frame set add this:
<script language="JavaScript">
var toShow;
var URL = new Array ('http://www.google.com','www.yahoo.com','www.bit.ly');
function setupTimer() {
toShow = 0;
loadNext();
var t=setTimeout("loadNext()", 3000);
}
function loadNext(){
parent.reportframe.location=URL[toShow];
toShow++;
if (toShow>3) toShow = 0;
}
</script>
<body onLoad="setupTimer()">
Then it will keep reloading the frames.
I just wrote this, did not test it, let me know if you need more help.
http://jsfiddle.net/5dazE/5/show
That's a basic slideshow. You can add or remove sites and then press play. It will rotate every 30 seconds. the code can be fond here: http://jsfiddle.net/5dazE/5
it could use more work, but I am in agreement with #nycynik. It is a great idea.

Categories