I want to create number generator but i want to control it better so i want to first generate number 30 and every next number should be in the range from 1 to 1000. I have done it but the last part dont work, it every time show 30. Can you help me? Thanks! (The code is ready to edit so there is everything good i just need some advice how to edit code to shnow second and every next number in range from 1 to 1000! THANKS!
var button = document.querySelector("button");
var number = document.querySelector("#number");
const nRuns = 12;
const timeout = 100;
let iterator = 0;
button.addEventListener( "click", textC);
function textC(){
number.textContent = `${Math.floor(Math.random() * 1000) + 1}\n`;
iterator += 1;
if (iterator < nRuns) {
setTimeout(textC, timeout)
} else{
iterator = 0;
number.textContent = 30;
}
}
<p id="number"></p>
<button>Generate</button>
this should work.
var button = document.querySelector("button");
var number = document.querySelector("#number");
const nRuns = 12;
const timeout = 100;
let iterator = 0;
let random = false;
button.addEventListener( "click", textC);
function textC(){
let n = Math.floor(Math.random() * 1000) + 1;
number.textContent = `${n}\n`;
iterator += 1;
if (iterator < nRuns) {
setTimeout(textC, timeout)
} else{
iterator = 0;
number.textContent = random ? n : 30;
random = true;
}
}
<p id="number"></p>
<button>Generate</button>
You need to switch the start and end values.
var button = document.querySelector("button");
var number = document.querySelector("#number");
const nRuns = 12;
const timeout = 100;
let iterator = 0;
button.addEventListener( "click", textC);
function textC(){
number.textContent = iterator === 0
? 30
: Math.floor(Math.random() * 1000) + 1;
iterator++;
if (iterator < nRuns) {
setTimeout(textC, timeout);
} else {
iterator = 0;
}
}
<p id="number"></p>
<button>Generate</button>
Ok so I have this code for a JavaScript letter randomiser that works perfectly fine, i'm just having trouble figuring out how i'd get it to produce more than just one line while still keeping my code relatively efficient.
Ideally id like it to say something like this and then cycle back to the start:
Hi, my name is Yeet
this is my website
I like making cool stuff
take a look around :)
Any help would be greatly appreciated :)))
window.onload = function() {
var theLetters = "abcdefghijklmnopqrstuvwxyz#%&^+=-";
var cntnt = "Hi, my name is Yeet";
var speed = 20; // ms per frame
var increment = 2; // frames per step
var clen = cntnt.length;
var si = 0;
var stri = 0;
var block = "";
var fixed = "";
//Call self x times, whole function wrapped in setTimeout
(function rustle(i) {
setTimeout(function() {
if (--i) {
rustle(i);
}
nextFrame(i);
si = si + 1;
}, speed);
})(clen * increment + 1);
function nextFrame(pos) {
for (var i = 0; i < clen - stri; i++) {
var num = Math.floor(theLetters.length * Math.random());
//Get random letter
var letter = theLetters.charAt(num);
block = block + letter;
}
if (si == (increment - 1)) {
stri++;
}
if (si == increment) {
// Add a letter;
// every speed*10 ms
fixed = fixed + cntnt.charAt(stri - 1);
si = 0;
}
$("#output").html(fixed + block);
block = "";
}
};
Make cntnt an array
var cntnt = ["Hi, my name is Yeet", "This is my website", "I like making cool stuff", "take a look around :)"];
and use pos % cntnt.length as the array index.
fixed = fixed + cntnt[pos % cntnt.length].charAt(stri - 1);
This question already has answers here:
Javascript wait() function [closed]
(2 answers)
Closed 3 years ago.
I am running a for loop with a break of 1 second between each iteration:
<html>
<body>
<script>
var text = "";
var i;
// Wait function
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
wait(100)
}
</script>
<script>document.write(text)</script>
</body>
Currently, when I open the file in a web browser, the browser window is loading until the for loop has finished and then the results are displayed (five output lines). Is there a way to display the out put "as it happens". With this I mean, I open the page and every second a new line is printed.
Thank you!
You should learn about timeout and interval concepts in Javascript.
Here is code that will do the work. Examine it.
<html>
<body>
<script>
function waitAndWrite(num) {
setTimeout(() => {
let text = "The number is " + num + "<br>";
document.write(text)
}, num * 1000)
}
for (let i = 0; i < 5; i++) {
waitAndWrite(i)
}
</script>
</body>
Instead of using your own "wait" function, you could use setInterval(fn, timeout) src instead.
var i = 0;
var interval = setInterval(() => {
i = i + 1;
if(i === 5) {
clearInterval(interval);
}
document.write("Your text " + i);
}, 1000);
What you are trying to achieve manually, you can achieve the same with WindowOrWorkerGlobalScope.setTimeout():
The setTimeout() method of the WindowOrWorkerGlobalScope mixin (and successor to Window.setTimeout()) sets a timer which executes a function or specified piece of code once the timer expires.
for (let i = 0; i < 5; i++) {
setTimeout(() => document.write("The number is " + i + "<br>"), 1000 * i); // multiply the delay with i in each iteration
}
I'm trying to implement something that looks like a console window, but on a webpage. I'd like it to just write a new line pinging an API every second or so. I have:
for (i = 0; i < 5; i++) {
text = httpGet('APICALL' );
document.write(text + '<br>');
sleep(1000);
}
This however, runs ALL the calls first and then writes. How can I change this?
EDIT:
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
You should use something like setTimeout, which is a standard way of doing it:
var sleepTime = 1000;
var i = 0;
setTimeout(function readNextMessage() {
if (i < 5) {
text = httpGet('https://turbine-farm.run.aws-usw02-pr.ice.predix.io/api/turbines/1/heartbeat' );
document.body.innerHTML += text + '<br>';
}
i += 1;
setTimeout(readNextMessage, sleepTime);
}, sleepTime);
You cant sleep a webpage. Your sleep function is doing this:
Enters into a loop of 1e7 steps.
Each step does a difference and compares it to a number.
It breaks if comparison is true.
Those 3 steeps, in a modern computer, are done in less than a second.
The difference between these two keywords in terms of scoping has already been thoroughly discussed here, but I was wondering if there is any kind of performance difference between the two, and if so, is it negligible, or at what point would it become significant?
After testing this on http://jsperf.com, I got the following results: jsperf has been down for a while; see the replacing code below.
To check this, I'll use the following performance test based on this answer, which led me to write this function:
/**
* Finds the performance for a given function
* function fn the function to be executed
* int n the amount of times to repeat
* return array [time for n iterations, average execution frequency (executions per second)]
*/
function getPerf(fn, n) {
var t0, t1;
t0 = performance.now();
for (var i = 0; i < n; i++) {
fn(i)
}
t1 = performance.now();
return [parseFloat((t1 - t0).toFixed(3)), parseFloat((repeat * 1000 / (t1 - t0)).toFixed(3))];
}
var repeat = 100000000;
var msg = '';
//-------inside a scope------------
var letperf1 = getPerf(function(i) {
if (true) {
let a = i;
}
}, repeat);
msg += '<code>let</code> inside an if() takes ' + letperf1[0] + ' ms for ' + repeat + ' iterations (' + letperf1[1] + ' per sec).<br>'
var varperf1 = getPerf(function(i) {
if (true) {
var a = i;
}
}, repeat);
msg += '<code>var</code> inside an if() takes ' + varperf1[0] + ' ms for ' + repeat + ' iterations (' + varperf1[1] + ' per sec).<br>'
//-------outside a scope-----------
var letperf2 = getPerf(function(i) {
if (true) {}
let a = i;
}, repeat);
msg += '<code>let</code> outside an if() takes ' + letperf2[0] + ' ms for ' + repeat + ' iterations (' + letperf2[1] + ' per sec).<br>'
var varperf2 = getPerf(function(i) {
if (true) {}
var a = i;
}, repeat);
msg += '<code>var</code> outside an if() takes ' + varperf1[0] + ' ms for ' + repeat + ' iterations (' + varperf1[1] + ' per sec).<br>'
document.getElementById('out').innerHTML = msg
<output id="out" style="font-family: monospace;white-space: pre-wrap;"></output>
After testing this in Chrome and Firefox, this shows that let is faster than var, but only when inside a different scope than the main scope of a function. In the main scope, var and let are roughly identical in performance. In IE11 and MS Edge, let and var are roughly equal in performance in both cases.
Press the big blue button to see for yourself in your favourite browser.
Currently let has support from only newer browsers, but older browsers are still being used relatively much, which would be a reason to generally not use it yet. If you want to use it somewhere where older browsers wouldn't function otherwise, there should be no problem with it.
Edit: revamped answer since jsperf is not working (see revision history for old version).
FYI; After Chrome v60, no further regressions have cropped up. var and let are neck and neck, with var only ever winning by less than 1%. Real world scenarios sometimes give var an advantage due to hoisting and re-use, but at that point you're comparing apples to oranges, as let is intended to allow you to avoid that behavior because the semantics are different.
Benchmark. Firefox, IE and Edge like let just fine.
Inside loops let is significantly slower see:
https://jsperf.com/let-vs-var-loop
838,602
±0.77%
61% slower
(function() {
"use strict";
var a=0;
for(let i=0;i<100;i++) {
a+=i;
}
})();
vs.
2,136,387
±1.09%
fastest
(function() {
"use strict";
var a=0;
for(var i=0;i<100;i++) {
a+=i;
}
})();
This is because when using let, for every loop iteration the variable is scoped. example:
for (let i = 0; i < 10 ; i++) {
setTimeout(function() { console.log(i); }, 100 * i);
}
yields to
0,1,2,3,4,5,6,7,8,9
using var yields to
10,10,10,10,10,10,10,10,10,10
If you want to have the same result, but using var you have to use an IIFE:
for (var i = 0; i < 10; i++) {
// capture the current state of 'i'
// by invoking a function with its current value
(function(i) {
setTimeout(function() { console.log(i); }, 100 * i);
})(i);
}
which on the other hand is significantly slower than using let.
$ node --version
v6.0.0
$ node
> timeit = (times, func) => {
let start = (new Date()).getTime();
for (let i = 0; i < times; i++) {
func();
};
return (new Date()).getTime() - start;
};
[Function]
> timeit(1000000, () => {
let sum = 0; // <-- here's LET
for (let i = 0; i < 1000; i++) {
sum += i;
if (sum > 1000000) { sum = 0; }
}
return sum;
})
12144
> timeit(1000000, () => {
var sum = 0; // <-- here's VAR
for (let i = 0; i < 1000; i++) {
sum += i;
if (sum > 1000000) { sum = 0; }
}
return sum;
})
2459
Same scope (function), same code, 5 times difference. Similar results in chrome 49.0.2623.75.
I remade dchekmarev's functions, here are my results.
Tested on Windows 10 x64 (version 1909), XAMPP, Firefox 84.0.2
Time in miliseconds:
var: let:
1622 1614
1628 1653
1872 1859
1594 1631
1614 1733
1661 1918
1606 1584
1698 1644
1648 1903
1602 1743
The results are ambiguous, but in most cases var seems a little bit faster
function varTime(times)
{
var start = (new Date()).getTime();
var sum = 0;
for (var i = 0; i < times; i++) {
for (var j = 0; j < 1000; j++) {
sum += j;
if (sum > 1000000) { sum = 0; }
}
};
console.log('var:', (new Date()).getTime() - start, ' ms');
return sum;
}
function letTime(times)
{
let start = (new Date()).getTime();
let sum = 0;
for (let i = 0; i < times; i++) {
for (let j = 0; j < 1000; j++) {
sum += j;
if (sum > 1000000) { sum = 0; }
}
};
console.log('let:', (new Date()).getTime() - start, ' ms');
return sum;
}
const times = 1000000;
const bla1 = letTime(times);
const bla2 = varTime(times);
var: Declare a variable, value initialization optional. Let is faster in outside scope.
let: Declare a local variable with block scope. Let is a little bit slow in inside loop.
Ex:
var a;
a = 1;
a = 2; //re-intilize possibe
var a = 3; //re-declare
console.log(a); //3
let b;
b = 5;
b = 6; //re-intilize possibe
// let b = 7; //re-declare not possible
console.log(b);