I want to set interval between clicks with this code. This is the script :
var inputs = document.getElementsByClassName('class-name');
for(var i=0; i<inputs.length;i++) {
inputs[i].click();
}
You can either set a bunch of time outs
var inputs = document.getElementsByClassName('class-name');
for (var i = 0; i < inputs.length; i++) {
(function(i){
setTimeout(function () {
inputs[i].click();
}, 1000 * i);
})(i);
}
or you can just use an interval
(function() {
var inputs = document.getElementsByClassName('class-name'),
current = 0,
timer = window.setInterval(
function () {
var input = inputs[current];
if (input) {
input.click();
current++;
} else {
window.clearInterval(timer);
}
}
,1000);
}());
Try this:
var inputs = document.getElementsByClassName('class-name');
for (var i = 0; i < inputs.length; i++) {
(function(i){
// to get the actual value of i
setInterval(function () {
inputs[i].click();
}, 1000);
})(i);
}
Related
The loop in myFunctionlp, is not working to the specified user input through prompt which is round in this case. I want that loop to run until the input of the user which I am getting through prompt. myFunctionlp is being called by a button press.
var round = prompt("Enter number of rounds");
var defaultNumberOfRounds = 1;
var roundno = isNaN(Number(round)) ? defaultNumberOfRounds : round;
var images_arr = ["../img/paper.png", "../img/stone.png",
"../img/sisor.png"
];
var size = images_arr.length;
console.log(`round: ${round}, roundno: ${roundno}`);
function myFunctionlp() {
for (var i = 0; i < roundno; i++) { //this loop
console.log(i);
setInterval(function() {
var x = Math.floor(size * Math.random())
$('#random').attr('src', images_arr[x]); // JQuery
}, 1500);
setInterval(function() {
var sound = new Audio("../audio/audio.mp3");
sound.play();
if (s == 50) {
sound.pause();
} else {
alert("Hello");
}
}, 3000);
}
}
function stop() {
for (s = 0; s < 51; s++) {
console.log(s);
}
}
function extra() {
var music = new Audio("../audio/audio_3.mp3");
music.play();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="onClick" onclick="myFunctionlp()">Play</button>
I did not manage to pass i as parameter from onready() into setInterval(), so meanwhile I parsed the loop:
function myFunc() {
myWidgets[0].onready = function(){
setInterval( function(){
var pVal = $('#Pv1').text();
myWidgets[0].setValue(pVal);
}, 1000);
};
myWidgets[1].onready = function(){
setInterval( function(){
var pVal = $('#Pv2').text();
myWidgets[1].setValue(pVal);
}, 1000);
};
myWidgets[2].onready = function(){
setInterval( function(){
var pVal = $('#Pv3').text();
myWidgets[2].setValue(pVal);
}, 1000);
};
How can I add i as parameter?
the following did not work , i is undefined in the internal function in setInterval:
myWidgets[i].onready = function(i){
setInterval( function(i){
var j = i + 1;
var pVal = $('#Pv' + j).text();
myWidgets[i].setValue(pVal);
}, 1000);
};
You could use enclosure to make the current value of i accessible throught onready:
for (var i=0;i<3;i++) {
(function(x){
myWidgets[x].onready = function(){
setInterval(function(){
var pVal = $('#Pv' + (x+1) ).text();
myWidgets[x].setValue(pVal);
}, 1000);
}
})(i);
}
Without an enclosure, the reason why it fails to use the current value of i is that it won't use the value at the current step of the loop. Rather than that, it will use the value of i when onready occurs, which is already maxed as the loop is over.
You could simply use a function enclosure.
for (var i=0; i<3; i++) {
(function(i) {
myWidgets[i].onready = function() {
setInterval(function(){
var pVal = $('#Pv'+(i+1)).text();
myWidgets[i].setValue(pVal);
}, 1000);
};
})(i);
}
Try this. The case you are referring to is closure
myWidgets = [];
for(var i = 0; i < 3; i++) {
myWidgets[i].onready = (function(i){
return function(){setInterval( function(){
var pVal = $('#Pv' + (i+1) ).text();
myWidgets[i].setValue(pVal);
console.log(i)
}, 1000);}
})(i);
}
What you can do, but i dont know if it is the answer on your question.
for(var i = 0; i < 3; i++) {
myWidgets[i].onready = function(){
setInterval( function(){
var pVal = $('#Pv' + (i+1) ).text();
myWidgets[i].setValue(pVal);
}, 1000);
};
}
It has everything to do with scopes and callback. Your solution does not work because the callback function of onReady does not know the context, for example does not know the i.
You can make this better with jQuery. (each widget has a class myWidget)
$('.myWidget').ready(function () {
var element = $(this); // is the widget of your code.
setTimeout(function () { element.val(element.val()*1 + 1); });
});
You need to read the documentation of the APIs you are trying to use.
https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval
will tell you this:
Syntax
var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);
Borrowing code from the answer by #Haneev it can be written as follows.
I am using j as formal parameter to make it obvious it is not using i from the outer scope.
for(var i = 0; i < 3; i++) {
myWidgets[i].onready = function(){
setInterval( function(j){
var pVal = $('#Pv' + (j+1) ).text();
myWidgets[j].setValue(pVal);
}, 1000, i);
};
}
I have tried for loops, etc, but i am having trouble running this function only twice
function play() {
setInterval(function(){
var next = $(".furniture .active, .pets .active").next("img");
var i = 0;
var current = next.prev("img");
current.removeClass("active").addClass("current")
next.removeClass("current").addClass("active");
if (!next.length) {
next = $(".furniture img:first");
};
}
}, 3000);
}
play();
You probably want something like this:
function play(timeout) {
setTimeout(function() {
...
}, timeout);
}
play(3000);
play(6000);
var counter = 0;
play();
function play()
{
counter = counter + 1;
var next = $(".furniture .active, .pets .active").next("img");
var i = 0;
var current = next.prev("img");
current.removeClass("active").addClass("current")
next.removeClass("current").addClass("active");
if (!next.length) {
next = $(".furniture img:first");
};
}
if (counter < 2)
{
setTimeout(play(), 3000);
}
}
I have a problem with my timer -
var myTimer = function () {
var d = Date.now();
// var t=d.toLocaleTimeString();
var timerSeconds = Math.round((od - d) / 1000);
document.getElementById("timer").innerHTML = "Time left for this tour:" + timerSeconds;
if (timerSeconds > 0) {
setTimeout(arguments.callee, 1000);
} else {
finTour();
}
};
myTimer();
it calls this function:
var finTour = function () {
deleteCartes();
randomCell();
od = Date.now() + 5000;
myTimer();
window.setTimeout(function () {
tourOfComp();
}, 5000)
var tourOfComp = function () {
for (var i = 0; i < 12; i++) {
if (document.getElementsByTagName("td")[i].style.backgroundColor == "aqua") {
document.getElementsByTagName("td")[i].firstChild.data = cartes[prochaineCarte++]
}
}
for (var j = 0; j < 12; j++) {
if (document.getElementsByTagName("td")[j].style.backgroundColor == "aqua")
document.getElementsByTagName("td")[j].style.backgroundColor = "";
}
for (var k = 0; k < 3; k++) {
tab[k].value = "";
}
od = Date.now() + timeFixe;
myTimer();
};
the problem is when I fix the time 20, it calls these two last function and the time is always 5 and never 20 it seems that it doesn`t renew the time, but only repeat this:
window.setTimeout(function ()
{
tourOfComp();
},5000)
I'm using javascript to set my mouseover at the left nav. But the problem is, the timeout is faster than it should be. How do I make it longer on mouseover?
stuHover = function () {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++) {
for (var x = 0; x < document.styleSheets[i].rules.length; x++) {
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1) {
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector, cssRule.style.cssText);
}
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i = 0; i < getElm.length; i++) {
getElm[i].onmouseover = function () {
this.className += " iehover";
}
getElm[i].onmouseout = function () {
this.className = this.className.replace(new RegExp("iehover\\\b"), "")
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
You want something like this:
getElm[i].onmouseout = function() {
var t = this;
setTimeout(function() {
t.className = t.className.replace(" iehover","");
},5000); // 5 seconds
};
Although really, if I had to wait 5 seconds for something to disappear if I accidentally moved over the trigger area, I'd be annoyed. Try 250 instead (0.25 seconds).