This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 5 years ago.
I'm attaching elements created by Javascript inside a for loop.
What I'm trying to achieve is different variables passed to a function for each element.
Here's my code:
var thumbnail_box = document.createElement("div");
thumbnail_box.onmouseenter = function(){show_new_attachement_toolbar(total_upload)};
thumbnail_box.onmouseleave = function(){hide_new_attachement_toolbar(total_upload)};
the variable total_upload is automatically incremented in the end of each loop, however when all the elements are added, the function only triggers for the final value of total_upload instead of separate value for each element
A simple fix would be to wrap that code in an IIFE:
(function(x) {
var thumbnail_box = document.createElement("div");
thumbnail_box.onmouseenter = function () { show_new_attachement_toolbar(x) };
thumbnail_box.onmouseleave = function () { hide_new_attachement_toolbar(x) };
})(total_upload);
You might need to read this
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
let keyword in the for loop
(3 answers)
What is the difference between "let" and "var"?
(39 answers)
Closed 2 years ago.
I am dynamically creating a series of buttons using a for loop and adding an Event Listener to them as follows (I have excluded several lines of code for simplicity). However, upon using any of the buttons after creation, the parameter "i" always corresponds to the value "i" had when it exited the for loop. I have seen numerous proposed solutions online, but none of them are actually working.
for (var i = 0; i < size; i++) {
button.addEventListener('click', () => this.Purchase(i))
}
You should use let i = 0 instead of var i = 0 in order to have the i variable be scoped to the loop. With var, i is scoped to the innermost function, which means it constantly gets overwritten. See here for more info.
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 5 years ago.
I have this array:
var arr = [];
var i =
1) There:
setInterval ( function push(arr) {arr.push(i+1)} , 5*1000)
you're shadowing the arr variable (that is declaring a new variable which hides the external one). You're thus pushing to undefined. There's of course the same problem when you read the values.
2) If you always push i+1 you always push 1. You probably want i++
Simply do
setInterval ( function push() {arr.push(i++)} , 5*1000)
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
I have an array of classes in javascript, each instance is created passing it the name of an mp3file. the idea is that each instance creates an "invisible" audio element and a div. When you click on the div you here it's audio.
This is a simplified version of the class... Every attempt I have tried to pass a pointer to the appropriate class to the "onclick" function has failed.. "this" obviously fails, the example below fails..
I have provisionally solved the problem by passing the class an "idx" and then to the div.onclick, so it "find's itself", but I am sure there is a more elegant solution of passing the div a reference to the appropriate audio element to play.
function myClass (mp3file) {
this.aud = document.createElement('audio');
this.aud.src = mp3file;
this.div = document.createElement('div');
this.div.className = 'dictDiv';
this.context = this;
this.div.onclick = function () {
context.aud.play();
}
}
var context = this;
this.div.onclick = function () {
context.aud.play();
}
Onclick overrides this, so working with this wouldnt work. You can store it in the scope (see top) or override the this binding:
this.div.onclick=function(){
this.div.appendChild(this.aud);
this.aud.play();
}.bind(this);
document.body.appendChild(this.div);
This question already has answers here:
Does it make sense to jQuery cache $(this)?
(2 answers)
Closed 7 years ago.
Do I save any memory or performance if I do this
function foo(){
var $this = $(this);
var class = $this.class();
var attr = $this.attr();
}
Over this
function foo(){
var class = $(this).class();
var attr = $(this).attr();
}
The performance difference may be minimal for simple applications, but it exists. Consider that $() is a function, so any time you invoke that function the engine has to execute the code within that function. Referencing an existing variable is going to be a lot faster than executing that potentially large function.
To put it another way, this:
var x = someFunction();
someOtherFunction(x);
will always be faster than this:
someFunction();
someOtherFunction(someFunction());
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 9 years ago.
I have some JSON data, and I'm trying to create classes and methods dynamically based on that data:
var classes = JSON.parse(data);
var classesObj = {};
for(var c in classes){
var methods = classes[c].methods;
var methodsObj = {};
for(var m in methods){
methodsObj[m] = function(args){
return methods[m].property;
}
}
classesObj[c] = methodsObj;
}
return classesObj;
But my problem is if I call something like
firstClass.firstMethod()
The property that is returned is actually from lastClass.lastMethod() I'm pretty sure it's an instantiation problem, but I just can't seem to figure out where to go from here.
The problem is that the anonymous variables (c and m) are bound to the same variable outside of the your anonymous function. See Javascript closure inside loops - simple practical example.