This question already has answers here:
Pass correct "this" context to setTimeout callback?
(6 answers)
Closed 9 years ago.
I have a piece of javascript code:
var intervalId;
intervalId = setInterval(fetchData, 2000);
$('.campaign-select li').on("click", "a", function(event)
{
window.clearInterval(intervalId);
intervalId = setInterval(fetchData_id($(this).data('campaign-id')), 2000);
});
The first setInterval was correct, the function fetchData is correctly loaded each 2 seconds.
But when I click the .campaign-select li a element, the fetchData_id is executed but only once, not repeated as expected with setInterval.
Any help?
Thanks.
You can't pass parameter in the setInterval function.
That being said, you should try this :
$('.campaign-select li').on("click", "a", function(event){
window.clearInterval(intervalId);
var $this = $(this)
intervalId = setInterval(function(){
fetchData_id($this.data('campaign-id'))
}), 2000);
});
Related
This question already has answers here:
Stop setInterval call in JavaScript
(7 answers)
Closed 1 year ago.
I'm trying to get this function cleared with the clearInterval but it's not working.
setInterval( ()=>{ funca(10,3); }, 500);
But when i use the clearInterval it doesn't stop printing the result.
Here's my code:
funca = function(a,b){console.log(a+b);}
setInterval( ()=>{ funca(10,3); }, 500);
clearInterval(funca);
It keeps printing as you can see:
The code running in console
So, how can i do it?
setInterval returns a value. You should use this value as the parameter to clearInterval:
funca = function(a, b){ console.log(a + b); }
const intervalHandle = setInterval(() => { funca(10, 3); }, 500);
clearInterval(intervalHandle);
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 4 years ago.
hi I want to use 'this' variable in setInterval in a jquery function
I write '// this code don't work' after don't worked line
(function($)
{
$.fn.rotate=function () {
var counter=0;
var timer=setInterval(function () {
counter++;
var transform='rotate('+counter+'deg)';
$(this).css('transform',transform); // this code dont work
if(counter>=300)
clearInterval(timer);
},1);
return this;
};
$('#socialNetworks i').rotate();
}(jQuery))
thanks Alot
Using the arrow function when defining the function maintains the this context in which the function has been called. Thus you would be able to access this inside the function correctly.
( $ => {
$.fn.rotate=function () {
var counter=0;
var timer=setInterval(function () {
counter++;
var transform='rotate('+counter+'deg)';
$(this).css('transform',transform); // this code dont work
if(counter>=300)
clearInterval(timer);
},1);
return this;
};
$('#socialNetworks i').rotate();
})(jQuery)
This question already has answers here:
Pass correct "this" context to setTimeout callback?
(6 answers)
Closed 5 years ago.
Here is my code.
document.getElementById("t-option").addEventListener("click", function () {
setTimeout(function () {
myFunction(this);
}, 1500)
});
I want "this" to return the "t-option". It is a radio button and I want to know each time which one has been called.
Maybe there is a complete alternative way to do this, I don't know.
This might help you.
function myFunction(self)
{
console.log(self);
}
var option = document.getElementById("t-option");
option.addEventListener("click", function(){
var self = this;
setTimeout(function() { myFunction(self);}, 1500);
});
<input type="checkbox" id="t-option">
This question already has answers here:
Pass correct "this" context to setTimeout callback?
(6 answers)
Closed 6 years ago.
I have an event for click-and-hold on a dynamic element
var timeoutId = 0;
$(document).on('mousedown', '.createbtn', function(){
timeoutId = setTimeout(showNewInfoCreateDlg, 1000);
}).on('mouseup mouseleave', '.createbtn', function() {
clearTimeout(timeoutId);
});
and the function is "showNewInfoCreateDlg"
I need to know what is the id of the element that was clicked-and-held
function showNewInfoCreateDlg(){
alert($(this).attr('id'));
}
The function alerts "undefined"
Here is the jsfiddle for my problem:
JsFiddle
Explicitly bind it to the function:
var timeoutId = 0;
$(document).on('mousedown', '.createbtn', function(){
timeoutId = setTimeout(showNewInfoCreateDlg.bind(this), 1000);
}).on('mouseup mouseleave', '.createbtn', function() {
clearTimeout(timeoutId);
});
To clarify: The bind() function will, well, bind the value of its first argument to the this variable inside showNewInfoCreateDlg. This is called explicit binding.
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
Below is my javascript code:
function showBranch_init() {
var id_arr = ["jdc_b1","jdc_b2","jdc_b3","jdc_b4"];
for(a=0;a<id_arr.length;a++){
timeoutID = window.setTimeout(function() {
showBranch(id_arr[a]); // <-- Right here
}, 500);
}
}
How can I pass the value of id_arr[a] to showBranch funcion?
Currently the above code returns null for id_arr[a]
by introducing a new scope (by a function call) for each iteration step you can pass the argument like this:
function showBranch_init() {
var id_arr = ["jdc_b1","jdc_b2","jdc_b3","jdc_b4"];
for(a=0;a<id_arr.length;a++){
(function(i) {
timeoutID = window.setTimeout(function() {
showBranch(id_arr[i]); // <-- Right here
}, 500*i);
})(a);
}
}
Updated to fullfill the 2nd req: showBranch() in 500ms steps..
http://jsfiddle.net/HXc4d/
function showBranch_init() {
var id_arr = ["jdc_b1","jdc_b2","jdc_b3","jdc_b4"];
for(a=0;a<id_arr.length;a++){
timeoutID = window.setTimeout(function(idvalue) {
showBranch(idvalue);
}(id_arr[a]), 500);
}
}
EDIT: The problem with your solution is the fact that when the code executes (timeout) id_arr no longer exists in the executing scope, thus leading to undefined result. When sending the variable as an argument it "stays" with the funciton itself, regardless of the executing scope.
function showBranch_init() {
var id_arr = ["jdc_b1","jdc_b2","jdc_b3","jdc_b4"];
timeoutID = window.setTimeout(function() {
for(a=0;a<id_arr.length;a++){
showBranch(id_arr[a]); // <-- Right here
}
}, 500);
}
can you do that?? O_O