To give a brief overview I am creating a loading bar that needs to go from 0 - 100 based on the total num of pins dropped onto a map in comparison to how many possible locations there are. So bellow I have some logic as to how I am going about achieving that.
//pin drop counter
var pDrop = 2;
//secondary drop counter
var dropCounter = pDrop
//result length counter
var rLength;
//pin drops and then runs the check marker count function
function dropPin(){ checkMarkerCount() }
//if a new pin was dropped then we increase the size of the bar
function checkMarkerCount() {
if (dropCounter != pDrop) {
moveBar();
}
function moveBar() {
//selects the loading bar from the DOM
var barEl = document.getElementById("pro-bar");
//states how wide the bar is
var barW = 1;
//dictates how fast it moves
var barid = setInterval(frame, 10);
//gets how many pins have dropped
var counter = pDrop;
function frame(counter) {
//rLength is the length of an array = the total amount of possible pin drops
if (counter >= rLength) {
clearInterval(barid);
} else {
barW = counter;
barEl.style.width = barW + '%';
console.log(barW)
}
}
}
}
The issues is that even if I say that pDrop is equal to 2 it will log that the length is undefined.... What have I done wrong?
You have to understand the concept of variables and arguments.
function frame(i_counter) {
//rLength is the length of an array = the total amount of possible pin drops
if (i_counter >= rLength) {
clearInterval(barid);
} else {
barW = i_counter;
barEl.style.width = barW + '%';
console.log(barW)
}
}
When you call the function frame, you should set params i_counter.
You think counter you passed as argument is the same you set above.
And barW = counter on your code take the argument you set.
I changed your code a bit, so you don't get rid of counter argument.
When executing frame, do this:
setInterval(function () {
frame(2);
}, 10);
Related
I want to get data from a sensor in milliseconds and then calculate the average value within ten seconds to alert based on the average value. The problem is that this code runs well as long as the while loop been set to less than 1000 or one second and when I set it to larger numbers(I want the loop to work infinitely and stop with a button function). I want to know if there any way to function this infinite loop in Javascript?
Here is my code:
const now = Date.now();
var epochTime = now;
//Arrey of the value
var Arrey = [];
Counter =0
while (epochTime<now+10000000) { //should be set infinite and stop with button
$.get('http://xxx/'+epochTime, function(data){
let myValue= data.data[354708094967841].crosscorrelations[0].value;
document.getElementById("demo").innerHTML +="<br/>"+ myValue ;
Arrey.push(myValue);
console.log(Arrey);
var sum =0;
console.log(epochTime);
if (Counter>=10000 && Counter%10000==0){
for ( i=Counter-10000; i<Counter; i++)
sum = sum + Arrey[i];
valueAverage= sum/10000;
console.log(valueAverage);
document.getElementById("valueAverage").innerHTML +="<br/>"+ valueAverage;
if (valueAverage>0.01){
alert("the value ave is high"); // ----> to check the code
}else{
alert("the value ave is low"); //-----> to check the code
}
}
console.log(Counter);
Counter++;
console.log(myValue); //get data from value in async version
});
epochTime ++;
}
As the comments said: $.get() is asynchronous, so it doesn't wait. What you could do, is wrap the get request in a function and call the function from within the request, thus creating a loop. So sort of like this:
var buttonClicked = false;
//Function simply wraps the get request so that it can be called at anytime
function getSensorData(){
$.get('http://xxx/'+epochTime, function(data){
let myValue = data.data[354708094967841].crosscorrelations[0].value;
document.getElementById("demo").innerHTML += "<br/>" + myValue;
Arrey.push(myValue);
console.log(Arrey);
var sum = 0;
console.log(epochTime);
if (Counter >= 10000 && Counter % 10000 == 0) {
for (i = Counter - 10000; i < Counter; i++)
sum = sum + Arrey[i];
valueAverage = sum / 10000;
console.log(valueAverage);
document.getElementById("valueAverage").innerHTML += "<br/>" + valueAverage;
if (valueAverage > 0.01) {
alert("the value ave is high"); // ----> to check the code
} else {
alert("the value ave is low"); //-----> to check the code
}
}
console.log(Counter);
Counter++;
console.log(myValue); //get data from value in async version
//Now that you're done with everything, you can check if the button is clicked and if it is, don't run the function again.
if (!buttonClicked){
getSensorData();
}
}
}
//Here we check if the button is clicked and change the variable when it is
$("#stopButton").click(function(){
buttonClicked = true;
});
Also, quick note: Variables in javascript are usually camelCase, not Capitalized; constants are the exception because they are generally ALLCAPS.
I am trying to make a function that will only retain its variable count from the past minute.
For example, if I call function count 100 times, if 60 of those calls were from the past minute, it will only return 60, and not 100.
This is what I have tried so far, making the variable an array and adding numbers to it everytime its called, but I do not know how to remove a count when a minute has passed.
var count = 1;
var countArray = [];
UPDATE:
I have updated my code with this, but the array elements are not removing as they should,
function Count() {
var jNow = new Date();
jCountArray.push(jNow);
for (var i = 0; i <= jCountArray.length; i++) {
var secondsDiff = (new Date(jNow).getTime() - new Date(jCountArray[i]).getTime()) / 1000;
if (secondsDiff >= 10) { jCountArray.shift(); }
}
console.log(jCountArray);
return jCountArray.length;
}
If I understand your requirements correctly, and the only thing you need Count to do is return how many times it was called in the last minute, I think we could do something relatively easily leveraging setTimeout:
function getCounter() {
let count = 0;
let duration = 60000;
return function () {
count = count + 1;
setTimeout(function () {
count = count - 1;
}, duration);
return count;
}
}
let counter = getCounter();
function count() {
console.log(counter());
}
<button onclick="count()">Count</button>
The only trick here is, to keep the actual count private, we need a factory function to wrap it in a closure. If that's unimportant you can write it as a simple function and keep the count in the parent scope. Also, for testing purposes you can change the duration to a lower millisecond count to see it in action.
I am writing a simulation for bunny survival in a meadow and have to detect the minimal plant growth rate for the bunny to survive. I decided to go with OOP. Hence, tried to design my "classes" in js. I haven't done much OOP in JS, so I am stuck. I don't understand why I keep getting "this.checkElementExists" is not a function.
I tried to follow OOP that was shown in Mozilla MDN for JS and here I am stuck. I updated to ES6 classes.
class Meadow{
constructor(){
this.grid = this.makeGrid();
//console.log(this.grid);
}
makeGrid(){
let grid = new Array(30);
for(var i=0; i < 30; i++){
grid[i] = new Array(30).fill(null);
}
return grid;
}
checkElementExists(coordinates){
if(this.grid[coordinates[0]][coordinates[1]] != null){
return true;
}else{
return false;
}
}
growAPlant(timeRate){
if(timeRate == null){
clearInterval(this.growAPlant);
}
let plant = new Plant();
let coord = plant.generateCoordinateInMeadow();
//console.log(coord);
// add a plant to the 2d array, but check if the that spot is free
// otherwise use the generateCOordinate in the meadow function
//console.log(this.grid[coord[0]][coord[1]]);
//var that = this;
var ans = checkElementExists(coord).bind(this);
console.log(ans);
while(!checkElementExists(coord)){
coord = plant.generateCoordinateInMeadow();
}
//console.log(coord);
//console.log(this.grid[coord[0]] == undefined);
this.grid[coord[0]][coord[1]] = plant;
//console.log(this.grid);
}
}
class Simulation{
constructor(){
this.passRateArray = []; // this array will be used to plot the data
this.failureRateArray = []; // array that will hold failure growth rates
this.timeToEnergyData = []; // an example would be [{0: 1000, 1: 999, 2: 998, ....., 10000: 0}]
this.rateToEnergyTimeData = {};
this.timeCounter = 100; // 10000
this.growthTimeRate = 1000; // 1 second
this.gap = 0.05;
this.meadow = new Meadow();
this.bunny = new Bunny();
}
timeToEnergyDataPopulator(currTime, energy){
var relation = {currTime : energy};
this.timeToEnergyData.push(relation);
}
simulation(){
// HERE I MAKE A CALL TO MEADOW.GROWAPLANT
setInterval(this.meadow.growAPlant.bind(this.meadow), this.growthTimeRate);
//meadow.growAPlant(this.growthTimeRate);
let bunnyMove = this.bunny.move();
// not enough energy, bunny did not survive
if(bunnyMove == false){
this.timeToEnergyDataPopulator(this.timeCounter, bunny.getBunnyEnergy());
let rate = this.growthTimeRate / 1000;
this.rateToEnergyTimeData = {rate : this.timeToEnergyData};
// add the failure rate to the failureRateArray
this.failureRateArray.push(this.growthTimeRate);
// increase the rate of plant growth
if(this.passRateArray.length < 1){
this.growthTimeRate = this.growthTimeRate + this.growthTimeRate * 0.5;
}else{
let lastSurvivalRate = this.passRateArray[this.passRateArray.length - 1];
this.growthTimeRate = lastSurvivalRate - ((lastSurvivalRate - this.growthTimeRate)*0.5);
}
// stop the meadow from growing a plant
meadow.growAPlant(null);
// stop the simulation
clearInterval(this.simulation);
}
while(!this.meadow.checkValidBunnyMove(bunnyMove).bind(this.meadow)){
bunnyMove = bunny.move();
}
if(meadow.checkIfBunnyEats(bunnyMove)){
// since bunny made still a move, -1 energy
bunny.decreaseEnergyByOne();
// and since the meadow at that coordinate had food, we add +10 to energy via eatPlant method
bunny.eatPlant();
// track the time to energy data
this.timeToEnergyDataPopulator(this.timeCounter, bunny.getBunnyEnergy);
}else{
// no food, -1 energy
bunny.decreaseEnergyByOne();
// track the time to energy data
this.timeToEnergyDataPopulator(this.timeCounter, bunny.getBunnyEnergy);
}
// decrement the timeCounter
this.timeCounter -= 1;
if(this.timeCounter <= 0){
this.timeToEnergyDataPopulator(this.timeCounter, bunny.getBunnyEnergy());
let rate = this.growthTimeRate / 1000;
this.rateToEnergyTimeData = {rate : this.timeToEnergyData};
this.passRateArray.push(this.growthTimeRate);
// bunny survived, adjust the growth rate
if(this.failureRateArray.length < 1){
this.growthTimeRate = this.growthTimeRate - (this.growthTimeRate * 0.5);
}else{
let lastFailureRate = this.failureRateArray[this.failureRateArray.length - 1];
this.growthTimeRate = this.growthTimeRate - ((this.growthTimeRate - lastFailureRate) * 0.5);
}
clearInterval(this.simulation);
}
}
runner(){
while(this.passRateArray[this.passRateArray.length - 1] - this.failureRateArray[this.failureRateArray.length - 1] > this.gap || this.passRateArray.length == 0 || this.failureRateArray.length == 0){
setInterval(this.simulation(), 1000);
}
console.log("The minimum plant regeneration rate required to sustain the bunny for 10000 units of time is " +
this.growthTimeRate + " regenerations/unit time");
}
}
Errors that I get:
1) simulation.js:62 Uncaught TypeError: this.meadow.checkValidBunnyMove is not a function
at Simulation.simulation (simulation.js:62)
at Simulation.runner (simulation.js:101)
at (index):24
2) meadow.js:1 Uncaught SyntaxError: Identifier 'Meadow' has already been declared
at VM16689 meadow.js:1
3) VM16689 meadow.js:37 Uncaught ReferenceError: checkElementExists is not defined
at Meadow.growAPlant (VM16689 meadow.js:37)
My question is why the number 1 and 3 errors persist?
clearInterval(this.growAPlant);
This clearInterval isn’t correct, because you need pass the return value of setInterval to it, not a function. It does helpfully imply that you have a setInterval(someMeadow.growAPlant, …) somewhere, though, and that’s where the issue is. When you reference a function without calling it – like when you pass it to setInterval – the object it belonged to doesn’t come with it. Then, when the timer fires, it calls the function without a this value.
In JavaScript, the value of this inside a non-arrow function is determined entirely by how the function is called, not where it’s declared. You can read about how this works in various other questions and pieces of documentation. Fixing the problem involves giving growAPlant the correct this somehow, either by:
placing a reference to it in a containing scope (i.e. moving your var that = this out one level and using that instead of this throughout)
wrapping the function in one that’ll preserve the correct value, as in
setInterval(someMeadow.growAPlant.bind(someMeadow), …);
(Function.prototype.bind) or
setInterval(function () {
someMeadow.growAPlant();
}, …);
(the someMeadow.growAPlant reference is now part of a call, so someMeadow becomes the this value for the call)
changing it into an arrow function, which doesn’t have its own this and uses the one from the containing scope
Only (2) will work when you convert to the simplest form of an ES6 class, so it’s the approach I recommend.
Explanation
First, this always refers to the first parent function. In your case it is:
this.growAPlant = function(timeRate){
//content
var that = this; // this is growAPlant
}
And
this.checkElementExists = function(coordinates){ }
Is accessible with Meadow object. However, your var that is referring to this.growAPlant = function(timeRate) not Meadow.
Solution
Create that in the beginning
function Meadow(){
var that = this;
that.growAPlant = function(timeRate){
}
that.checkElementExists = function(coordinates){
if(this.grid[coordinates[0]][coordinates[1]] != null){
return true;
}else{
return false;
}
};
return that;
}
I have an array which is taking values over the space of a second and calculating the average. The array is then permanently storing the values. I need them to remove the values after the average has been calculated. I have tried clearing the array at the end of the calculateAverage function using levelMeasurements = []; and levelMeasurements = 0; but that does not work.
Any help on this would be greatly appreciated, thanks!
My code:
var levelMeasurements = [];
function collectLevelMeasurements() {
levelMeasurements.push(averagingLevel);
}
var collectInterval = window.setInterval(collectLevelMeasurements, 0);
function calculateAverage() {
window.clearInterval(collectInterval);
var avg = 0;
for (counter = 0; counter < levelMeasurements.length; counter++) {
avg += levelMeasurements[counter] / levelMeasurements.length;
}
averageAbsoluteLevel = Math.abs(avg);
averageDbLevel = Tone.gainToDb(averageAbsoluteLevel) * scale + offset;
console.log("Measure for 5 minutes: average level is:" + averageDbLevel);
}
window.setInterval(calculateAverage, 1000);
Your collectInterval timeout is never reinstated after the first time calculateAverage is called, unless the issue is something else not visible from the code.
In your code calculateAverage is called every 1000 milliseconds, but the values stored in levelMeasurements are not updated after the first window.clearInterval.
I made a simplified snippet without Tone lib:
var levelMeasurements = [];
//added this as a easy source of values
let count = 0;
function collectLevelMeasurements() {
// levelMeasurements.push(averagingLevel);
levelMeasurements.push(count++);
}
var collectInterval = window.setInterval(collectLevelMeasurements, 0);
function calculateAverage() {
window.clearInterval(collectInterval);
var avg = 0;
for (counter = 0; counter < levelMeasurements.length; counter++) {
avg += levelMeasurements[counter] / levelMeasurements.length;
}
averageAbsoluteLevel = Math.abs(avg);
averageDbLevel = averageAbsoluteLevel;
//prolly dont need tone lib for this example
// averageDbLevel = Tone.gainToDb(averageAbsoluteLevel) * scale + offset;
console.log("Measure for 5 minutes: average level is:" + averageDbLevel);
//reset these variables
levelMeasurements = [];
count = 0;
console.log(levelMeasurements)//empty array at this point
//reset the collectInterval!
collectInterval = window.setInterval(collectLevelMeasurements, 0);
}
window.setInterval(calculateAverage, 1000);
You can try following:
levelMeasurements.length = 0.
Or refer more solution at here: How do I empty an array in JavaScript?
okay so i want if my counter reaches the maximum count, it starts over, with the default counter number which is 0 here is my code:
var picCount = 0; // global
var maxCount = 4;
//Pictures, to add more then 4 pics, add var picFive = "link to image here", var picSix ="bla", you get it.. add in picArray ,picFive and ,picSix
//To change the time delay, change it at the body onload and on the setTimeout
var picOne = "http://screenshots.nl.sftcdn.net/nl/scrn/3342000/3342167/modloader-for-minecraft-02-700x406.jpg"
var picTwo = "http://media.moddb.com/images/downloads/1/31/30912/minecraft_blox.png"
var picThree = "http://www.mupload.nl/img/rl6zeofbb.png"
var picFour = "http://www.mupload.nl/img/rl6zeofbb.png"
var picArray = [picOne, picTwo, picThree, picFour]
//
// gets next picture in array
function nextPic() { // check if adding 1 exceeds number of pics in array
if (picCount.length < maxCount.length) {
picCount = (picCount + 1 < picArray.length) ? picCount + 1 : 5000;
// build the image to write to page using the new pic reference
var build = '<img border="0" src="' + picArray[picCount] + '" width="649">\n';
document.getElementById("imgHolder").innerHTML = build;
// repeat this every 10 seconds.
setTimeout('nextPic()', 10 * 1000) //setTimeout is here
} else {
picCount = (picCount - maxCount < picArray.length) ? picCount + 1 : 5000;
// build the image to write to page using the new pic reference
var build = '<img border="0" src="' + picArray[picCount] + '" width="649">\n';
document.getElementById("imgHolder").innerHTML = build;
// repeat this every 10 seconds.
setTimeout('nextPic()', 10 * 1000) //setTimeout is here
}
}
okay so i hope you guys can help me with this..
That's a lot of messy code.
My fix for an implementation would probably look something like this:
var currentPic = 0;
var picOne = "http://screenshots.nl.sftcdn.net/nl/scrn/3342000/3342167/modloader-for-minecraft-02-700x406.jpg"
var picTwo = "http://media.moddb.com/images/downloads/1/31/30912/minecraft_blox.png"
var picThree = "http://www.mupload.nl/img/rl6zeofbb.png"
var picFour = "http://www.mupload.nl/img/rl6zeofbb.png"
var picArray= [picOne,picTwo,picThree,picFour]
function nextPic() {
if (currentPic < picArray.length) {currentPic++;}
else {currentPic = 0;}
var build='<img border="0" src="'+picArray[currentPic]+'" width="649">';
document.getElementById("imgHolder").innerHTML=build;
// repeat this every 10 seconds.
setTimeout('nextPic()',10 * 1000)//setTimeout is here
}
Despite many other issues which I am sure are present in your code, I believe this line is the cause of your particular problem addressed in the question:
if (picCount.length < maxCount.length) {
maxCount and picCount are just numbers. They do not have a length property. Change it to this:
if (picCount < maxCount) {
var currentPic = 0;
var picArray= ["http://screenshots.nl.sftcdn.net/nl/scrn/3342000/3342167/modloader-for-minecraft-02-700x406.jpg",
"http://media.moddb.com/images/downloads/1/31/30912/minecraft_blox.png",
"http://www.mupload.nl/img/rl6zeofbb.png",
"http://www.mupload.nl/img/rl6zeofbb.png"];
function nextPic() {
(currentPic < picArray.length) ? currentPic++ : currentPic = 0;
var build='<img border="0" src="'+picArray[currentPic]+'" width="649">';
document.getElementById("imgHolder").innerHTML=build;
}
setTimeout('nextPic()',10 * 1000);
I made a few changes that make your code cleaner.
Some tips:
No need to store your image URLs in vars before putting them in the array. Just initialize your array with them.
Don't repeat yourself. Whenever you find yourself using the exact same code in multiple places, you probably need to rethink how you are approaching the problem.
Look up the "ternary operator". In my opinion it makes simple conditional statements easier to read.
No need to use maxCount - the max count will be the length of your picArray.
Although not usually required, try to end all statements with a semicolon.
Don't mind the elitist attitude some people have, but at the same time, try to research as much as you can before asking a question.