Develop Reference

typescript - calling function at random intervals in ionic

I would like to repeatedly call the changeStyle() function at random intervals
here is my code so far:
this.platform.ready().then(() => {
this.myFunction()
});
myFunction() {
var min = 5,
max = 10;
var rand = Math.floor(Math.random() * (max - min + 1) + min); //Generate Random number between 5 - 10
this.changeStyle()
setTimeout(this.myFunction, rand * 1000);
}
changeStyle() {
console.log('changing style');
this.sensorImage = 'path/to/image1';
setTimeout(() => {
this.sensorImage = 'path/to/image2';
},
2000);
}
the relevant html code is
<img id='35' (click)="changeStyle()"
src="{{sensorImage}}">
ideally what this should do is call the changeStyle() function repeatedly and randomly without any input from me. however, I get a runtime error saying:
'TypeError: this.changeStyle is not a function. (In 'this.changeStyle('')', 'this.changeStyle' is undefined)'

Can you update your setTimeout(this.myFunction, rand * 1000); function to,
setTimeout(this.myFunction.bind(this), rand * 1000);
I believe the issue is related to this context.

You could do something like this,
changeStyle() {
...
...
const randomMilliSeconds = Math.floor( Math.random() * 10 ) * 1000;
setTimeout(() => {
this.changeStyle();
}, randomMilliSeconds)
}
You just need to call changeStyle once, manually or using click event and it will call itself at random intervals.

Pomodoro clock canvas ring not registering

Good evening everyone. I'm having some trouble with this bit of code and have been at it for a few hours. If you take a look in the constructor at this.drawArc and then in the prototype, I've logged to the console a couple things. You can see this.count logs a value, but this.drawArc does not. Obviously, this.minutes and this.toSeconds work, or the timer wouldn't start, but why does the drawArc not register the values?? I had this(the status ring) working before placing it in a constructor, but for some reason, it no longer registers any values. I have attached a fiddle.
NOTES: this is not complete - currently you have to re-run if you want to enter a new value into the input field. Once a value has been entered into the input(the small circle above the button) you can hover over the canvas(the larger circle) to view the countdown. The reason it is on hover is for those that don't want to see the ticking clock and prefer just the visual of the status ring. Any ideas??? I've been stuck for a few hours. Thank you in advance
https://jsfiddle.net/asthewaterfalls/szn0mch1/9/
function Pomodoro(userInput) {
this.minutes = userInput;
this.toSeconds = 60 * this.minutes;//seconds - actual
this.cout = this.toSeconds; //for timer
this.seconds = 0; //display
this.count = 0; //for status ring
this.circleStart = Math.PI * 1.5;
this.drawArc = (2 / this.toSeconds) * this.count;
}
Pomodoro.prototype.statusRing = function () {
if(this.count <= this.toSeconds) {
dom.canv.beginPath();
dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc), false);
dom.canv.stroke();
this.count++;
console.log(this.count, this.drawArc);
const timeout = setTimeout(() => this.statusRing(), 1000 );
}
};

I took a look at your fiddle. With two small changes I got some animation into the blue ring around the clock. I did not check the ratios or angeles.
I made drawArg a function, calculating with the current value as argument and this.toSeconds as max value:
this.drawArc = function(arg){ return (2 / this.toSeconds) * arg; };
Second, I calld the function in dom.conv.arc():
dom.canv.arc(/*...*/, Math.PI * (1.5 + this.drawArc(this.count)), /*...*/);
Here is the complete example:
function Pomodoro(userInput) {
this.minutes = userInput;
this.toSeconds = 60 * this.minutes;//seconds - actual
this.cout = this.toSeconds; //for timer
this.seconds = 0; //display
this.count = 0; //for status ring
this.circleStart = Math.PI * 1.5;
this.drawArc = function(arg){ return (2 / this.toSeconds) * arg; };
}
Pomodoro.prototype.statusRing = function () {
if(this.count <= this.toSeconds) {
dom.canv.beginPath();
dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc(this.count)), false);
dom.canv.stroke();
this.count++;
console.log(this.count, this.drawArc);
const timeout = setTimeout(() => this.statusRing(), 1000 );
}
};
Please let me know, if this helps ;)

How to play a sound at random time in javascript

I have this sound:
a = new Audio('audio.mp3');
and when I want to play it I use a.play()
How can I play this at random times?

Try this:
(function loop() {
var rand = Math.round(Math.random() * (3000 - 500)) + 500; // A random value between 3 and 500 seconds
setTimeout(function() {
a.play(); // Play the audio
loop(); // Call the loop function again
}, rand);
}());
Source: this question.

setInterval and Math.random() are what you are looking for.
a = new Audio('audio.mp3');
window.setInterval(function () {
a.play();
}, Math.random() * 500);

Howto run function every few seconds that has return values?

How can I run this every few second , without blocking the rest of the pagefrom loading.
function Create() {
var SomeArray = [];
for ( var i=0; i<=1 ; i ++) {
SomeArray[i] = (Math.random() * 10) + 1;
//alert(arr[0]);
}
return SomeArray;
}
var x = Create();
alert(x[0] + x[1]);
I was trying this var timer = setInterval(Create, 5000); it prevent loading rest of the page.
i want to get new values every few seconds

A basic example would be:
var counter = 0;
var timerRef;
var increment = function() {
counter += 1;
console.log(counter);
timerRef = setTimeout(increment, 1000);
}
setTimeout(increment, 1000);
// clearTimeout(timerRef);
Please avoid document.write refer the screencast for further details.

setInterval() can be configured to repeatedly call any function you designate at whatever time interval you request. But, you can't retrieve a return value from that function. Instead, you need to process the results from within the callback that you pass to setInterval() or call some other function and pass the results you generate inside the callback. This is how asynchronous functions work in JavaScript. I've provided several examples below of your options:
If you just want to generate two random decimal values between 1 and 10 (inclusive) every 5 seconds, you can do that like this:
var interval = setInterval(function() {
var rand1 = (Math.random() * 10) + 1;
var rand2 = (Math.random() * 10) + 1;
// now insert code here to do something with the two random numbers
}, 5000);
If you wanted the random values to be integers (which is more common), then you would do this:
var interval = setInterval(function() {
var rand1 = Math.floor(Math.random() * 10) + 1;
var rand2 = Math.floor(Math.random() * 10) + 1;
// now insert code here to do something with the two random numbers
}, 5000);
If you want to call a function and pass it those two random numbers, you can do this:
function processRandoms(r1, r2) {
// code here to do something with the two random numbers
}
var interval = setInterval(function() {
var rand1 = Math.floor(Math.random() * 10) + 1;
var rand2 = Math.floor(Math.random() * 10) + 1;
processRandoms(rand1, rand2);
}, 5000);
You can then stop the recurring interval at any time with this:
clearInterval(interval);

How can I make this variable generate a new random number on div refresh?

var randomNumber = Math.floor(Math.random() * 10000);
// Sets the variable randomNumber to a random number between 0 and 1 x 10,000
var auto_refresh = setInterval(function() {
$('#screen').load('screen.php');
}, (randomNumber));
// Refreshes #screen at an interval of randomNumber
I would like that every time the #screen div refreshes, a new random number is generated. As it is right now, the div refreshes only at the first random number set.

Use setTimeout instead of setInterval.
function scheduleNextLoad() {
setTimeout(function () {
$('#screen').load('screen.php');
scheduleNextLoad();
}, Math.floor(Math.random() * 10000));
}
scheduleNextLoad();