The glowing CSS effect is:
//Public Variables.
var clear_interval;
var stop_set_time_out;
function record_css_effect() {
clear_interval = setInterval(
function() {
rec_block.css('background-color', "red");
stop_set_time_out = setTimeout(function() {
rec_block.css('background-color', "green");
}, 500)
}, 1000);
};
And in another function, I call:
function stop_record() {
alert("Stop record.");
clearTimeout(stop_set_time_out);
clearInterval(clear_interval);
}
The glowing only stops first time.
The second time, I didn't call record_css_effect() function yet the glowing effect happened automatically...
which would mean that the clearTimeout and clearInterval don't work...
Why is that, and How can I achieve it?
UPDATE:
Actually, I use clearInterval( clear_interval ); in many places.
As the user want to take record,they press on a button, and pop_record_window() is then called.
function pop_record_window()
{
$('#start_and_stop_rec').click
(
function(){ record_voice(); }
)
}
function record_voice()
{
record_css_effect();
REC= $("#start_and_stop_rec");
if(REC.prop("value")=="record")
{
alert("Start to record");
alert( dir_path + User_Editime + "/rec"+"/" + "P" + current_page + "_" + records_pages_arr[current_page].get_obj_num() +".mp3");
current_rec_path= dir_path + User_Editime + "/rec"+"/" + "P" + current_page + "_" + records_pages_arr[current_page].get_obj_num() +".mp3";
cur_record_file= new Media(current_rec_path,onSuccess, onError);
cur_record_file.startRecord();
$('#stop_rec').bind("click", function(){
clearTimeout( stop_set_time_out );
clearInterval( clear_interval );
});
REC.prop("value","stop");
}
else if(REC.prop("value") == "stop")
{
stop_record();
cur_record_file.stopRecord();
clearInterval( clear_interval );
//make visibility hidden!
REC.prop("value","record");
}
};
But since the second time, the user didn't press on the button: start_and_stop_rec, the glowing effect fires. However, the code within
if(REC.prop("value")=="record") condition doesn't execute.
If you call record_css_effect() multiple times multiple intervals might start but only the last interval-id will be stored in clear_interval. By ensuring only 1 interval is running at a time you can prevent this from happening.
//Public Variables.
var clear_interval;
var stop_set_time_out;
function record_css_effect() {
if (clear_interval !== null) // if a timer is already returning don't start another
return;
clear_interval = setInterval(function () {
rec_block.css('background-color', 'red');
stop_set_time_out = setTimeout(function () {
rec_block.css('background-color', 'green');
}, 500)
}, 1000);
};
function stop_record() {
alert("Stop record.");
clearTimeout(stop_set_time_out);
clearInterval(clear_interval);
stop_set_time_out = clear_interval = null;
}
You can also make your code a bit simpler (by removing the setTimeout) to make it easier to debug, like so:
//Public Variables.
var clear_interval, isRed = false;
function record_css_effect() {
if (clear_interval !== null) // if a timer is already returning don't start another
return;
clear_interval = setInterval(function () {
if (isRed) {
rec_block.css('background-color', 'red');
isRed = false;
} else {
rec_block.css('background-color', 'green');
isRed = true;
}
}, 500);
};
function stop_record() {
alert("Stop record.");
clearInterval(clear_interval);
clear_interval = null;
}?
Related
I have a custom animating effect task in jQuery queue. And there is a setInterval call inside it.
After some time the stop() function is being invoked. It removes the callback of currently executing task from the queue and starts executing the next one.
But setInterval from the previous effect (which already having been removed) is still running. Where should I place the clearInterval to be invoked after cancelling the task with calling the stop()?
Here is an example:
$('body')
.queue(function(next) {
var i = 0, el = this;
var interval = setInterval(function() {
el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
if (i > 5) {
clearInterval(interval);
next();
}
}, 1000);
})
.queue(function() {
this.style.backgroundColor = '#005';
});
setTimeout(function() {
$('body').stop();
}, 1500);
https://jsfiddle.net/coderlex/tLd9xtjj/
Move your interval variable instantiation outside of the queue closure function, then you can clear it whenever you call stop().
var interval = null;
$('body')
.queue(function(next) {
var i = 0, el = this;
interval = setInterval(function() {
el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
if (i > 5) {
clearInterval(interval);
interval = null;
next();
}
}, 1000);
})
.queue(function() {
this.style.backgroundColor = '#005';
});
setTimeout(function() {
$('body').stop();
if (interval != null) {
clearInterval(interval);
interval = null;
}
}, 1500);
Not sure about official support of this method, but after reading the jQuery sources it seems I've found the solution. There is an undocumented second argument given to the callback function of the queue task. That's the object of the current effect's hooks. The property we need named stop accordingly. If set, the closure is called only in case of manual effect stopping by stop() or finish() methods. It's not being called on clearing or setting new queue.
Here is an example:
$('body')
.queue(function(next, hooks) {
var i = 0, el = this;
var interval = setInterval(function() {
el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
if (i > 5) {
clearInterval(interval);
next();
}
}, 1000);
hooks.stop = function() {
clearInterval(interval);
}
})
.queue(function(next) {
this.style.backgroundColor = '#005';
next();
});
setTimeout(function() {
$('body').stop();
}, 1500);
I got this code from: Jquery: mousedown effect (while left click is held down)
It is behaving that if I am holding the button in every 50ms it will do something.
var timeout = 0;
$('#button_add').mousedown(function () {
timeout = setInterval(function () {
value_of_something ++;
}, 50);
return false;
});
});
But what I want is to execute this part after holding down the button by 1 second and it will continuously do the action 50ms.
As I said you need to use setTimeout()
var timeout = 0;
$('#button_add').mousedown(function () {
setTimeout(function(){
timeout = setInterval(function () {
value_of_something ++;
}, 50);
} , 1000);
return false;
});
Jsfiddle
Please use this code... You have to clearTimeout when user mouseup :
var timeout = 0;
$('#button_add').mousedown(function() {
oneSecondTimer = setTimeout(function() {
timeout = setInterval(function() {
value_of_something++;
}, 50);
}, 1000);
return false;
});
$("#button_add").mouseup(function() {
clearTimeout(oneSecondTimer);
});
Code looks like that:
function startTimer(counter) {
var interval = setInterval(function () {
counter--;
$('#timer').html(counter);
// Display 'counter' wherever you want to display it.
if (counter == 0) {
clearInterval(interval);
$('#question').html("Time ended");
setTimeout(function () {
window.location.href = "/";
}, 5000);
return false;
}
}, 1000);
}
What I want to do is, when I call this function multiple times, every time to reset timer to 30 seconds and kill all past instances. Currently it messes up with past intances when I call multiple times. What am I doing wrong?
You have to define the var interval outside the function:
var interval;
function startTimer(counter) {
interval = setInterval(function () {
counter--;
$('#timer').html(counter);
// Display 'counter' wherever you want to display it.
if (counter == 0) {
clearInterval(interval);
$('#question').html("Time ended");
setTimeout(function () {
window.location.href = "/";
}, 5000);
return false;
}
}, 1000);
}
I have a onload function in jquery like:
$(function () {
$('.over').hover(function () {
//FIRST PARAMETER RIGT, LEFT, TOP, BOTTOM
if ($(this).attr('data-direction') == 'right') {
$(this).addClass('flipping-right');
}
else if ($(this).attr('data-direction') == 'left') {
$(this).addClass('flipping-left');
}
else if ($(this).attr('data-direction') == 'top') {
$(this).addClass('flipping-top');
}
//ETC.
//SECOND gal1,gal2,gal3,gal4
if ($(this).attr('gal') == 'gal1'){
img = $(this).find('img');
setTimeout(function() {
img.attr('src', arrFirstYellowCard[i]);
i++;
if(i > arrFirstYellowCard.length-1)
i=0;
}, 100);
}
else if ($(this).attr('gal') == 'gal2'){
img = $(this).find('img');
setTimeout(function() {
img.attr('src', arrSecondPurpleCard[j]);
j++;
if(j > arrSecondPurpleCard.length-1)
j=0;
}, 100);
}
I want a function to execute that function every second but with parameters in array like
var array_param = ["right,gal1","top,gal3","bottom,gal4","left,gal2","right,gal5"];
which are allowed combinations
I want like a timer so each parameter is called every second
var timer = $.timer($('.over').hover(array_param( 0 ) ), 1000);
timer.play();
but I do not know how to implement this function, and how to add parameters to a function allocated in onload :
$(function () { $('.over').hover(function () {...
Please take a look at my jsfiddle
You can't trigger ready again. You can create a named function and call it a bunch.
$(function () {
index = 0;
window.setInterval(function () {
if (index > array_param.length) index = 0;
myFunction(array_param[index++]);
}, 1000); // call myFunction every second
});
myFunction = function (image) {
$('.over').hover(function () {
// rest of your code goes here
...
};
So, I've got this type of situation, but I only want to "Do something" if the user "mouseleave(s)" for more than x amount of time, say one second. How should I implement that?
$("#someElement, #someOtherElement").mouseleave(function() {
// Do something.
});
Later I added:
$('.popover3-test').popover({
placement:'bottom',
template: $('.popover2'),
trigger: 'manual',
}).mouseenter(function(e) {
$(this).popover('show');
$(".popover3-test, .popover2").each(function() {
var t = null;
$(this)
.mouseleave(function() {
t = setTimeout(function() {
$('.popover2').hide();
}, 1000); // Or however many milliseconds
})
.mouseenter(function() {
if(t !== null)
clearTimeout(t);
})
;
});
});
setTimeout should do the trick:
$("#someElement, #someOtherElement").each(function() {
var t = null;
$(this)
.mouseleave(function() {
t = setTimeout(function() {
// Do something.
}, 1000); // Or however many milliseconds
})
.mouseenter(function() {
if(t !== null) {
clearTimeout(t);
t = null;
}
})
;
});
EDIT: If you want it to work on either, just remove the .each:
var t = null;
$("#someElement, #someOtherElement")
.mouseleave(function() {
t = setTimeout(function() {
// Do something.
}, 1000); // Or however many milliseconds
})
.mouseenter(function() {
if(t !== null) {
clearTimeout(t);
t = null;
}
})
;
$("#someElement, #someOtherElement").bind('mouseenter mouseleave', (function() {
var timer;
return function (e) {
if(e.type === 'mouseleave') {
timer = setTimeout(function () {
//do something
}, 1000);
} else {
clearTimeout(timer);
}
};
}()));
EDIT - usable on multiple elements
$("#someElement, #someOtherElement").bind('mouseenter mouseleave', function (e) {
var timer = $(this).data('timer');
if(e.type === 'mouseleave') {
timer = setTimeout(function () {
//do something
}, 1000);
} else {
clearTimeout(timer);
}
$(this).data('timer', timer);
};
});
this might not work as is, but gives you some ideas...
var elapsed = 0;
var timer = setInterval(function(){
elapsed += 20;
if( elapsed >= 1000 ) {
doSomething();
clearInterval(timer);
}
}, 20 );
$('#some').mouseleave(timer);
$('#some').mouseenter(function(){clearInterval(timer);elapsed=0;});