I need some help with a JavaScript function that I call onKeyUp, it is a Ajax function but every time I write any character it calls the function and it slow the page performance and it check every time, it is an user check with the database.
I tried this:
var timer;
function chk_me(){
clearTimeout(timer);
timer=setTimeout(function validate(){...},1000);
}
But my validate function have a parameter so I am unable to pass it, I call the function like this:
<input type="text" name="usuario" id="usuario" class="required" onKeyUp="chk_me();" minlegth="4" value=/>
Is it right? What should I do?
It is my first question and I hope that you all understand it
Thanks,
Alberto
Thank you all, since I am new I cant do it in a different answer so I edited my question with the solution.
I find this: http://bytes.com/topic/javascript/answers/451142-need-advice-acting-only-last-onkeyup-event-series and use the last answer method and add it some code, I leave you the code, like it say it isnt the best way but works so if you have some other way I will appreciate it and use it here it is:
var keyCount = 0;
var timeoutCount = 0;
function handleKeyUp() // keyup handler
{
keyCount++;
setTimeout("compareCounts()", 500);
}
function compareCounts()
{
var usuario = document.profileForm.usuario.value;
timeoutCount++;
if (keyCount == timeoutCount)
{
xajax_checaUsuario(usuario);
}
}
So I take the var in that way any suggestions to make it better?
Thanks
Don't pass validate directly to setTimeout, but rather call it from within an anonymous function:
var timer;
function chk_me(arg) {
clearTimeout(timer);
timer = setTimeout(function () {
validate(arg);
}, 1000);
}
If I understood your question correctly, I think what you want is to contain your parameter within a closure:
var timer;
function chk_me(myparam) {
clearTimeout(timer);
var validate = function() {
//do stuff with myparam
var foo = myparam;
}
timer=setTimeout(validate,1000);
}
As before, the timer ensures any previous calls are canceled, unless there's been a 1 second wait, and when you define validate within the scope of chk_me, the local variable myparam will be visible inside it, even when it's handle is passed to setTimeout.
You can do the following
var timer;
function chk_me(myparam){
clearTimeout(timer);
timer=setTimeout(function validate(){...},1000);
}
In javascript you can access any variables in the scope in which the function is defined. And below is how you use it.
<input type="text" name="usuario" id="usuario" class="required" onKeyUp="chk_me('stringval');" minlegth="4" value=/>
Related
This question already has answers here:
In JavaScript, how can I access the id of setTimeout/setInterval call from inside its event function? [closed]
(2 answers)
Closed 6 years ago.
Is it possible to send interval id to executing function as an argument ? For example some thing like this:
var id= setInterval(myFunc.bind(null,id),1000);
What I am going to do is that in myFunc I want to do some processing and clear interval if I need. I can't use global variable because it will be happened multiple time. And I know that I can use global array but it would a little a bit of time consuming because of my function logic. So I want to know if I can pass interval id as an argument to myFunc.
EDIT:
this stackOverfllow link dosen't help me because there were no helpful answer.
I use this pattern:
function myFunc(host){
console.log(host.id);
}
var host = {};
host.id = setInterval(myFunc.bind(null,host),1000);
You could actually try mixing up setTimeout and setInterval to accomplish what you are looking for.
you could read more about setInterval on how to pass additional parameters to the functions.
var interval = 0;
function logId(param) {
interval++;
if (interval === 3) {
clearInterval(param);
}
console.log(param);
}
var id = setInterval(function() {
setTimeout(logId, 0, id)
}, 1000);
You can create your own function to store your callback function and interval id in the same object and pass that object to your interval function which will call the provided function with the interval id.
function setMyInterval(f,t) {
var handleMyInterval = function(ob) {
ob.func(ob.id);
};
var idOb = {func: f};
idOb.id = setInterval(handleMyInterval,t,idOb);
return idOb.id
}
You can use function inside you interval so you can do like this.
Create a function that will do interval and clear itself after a time you set.
intervalTime is time for loop interval and timeout is the time to clear interval loop.
both receive in millisecond.
function test(intervalTime,Timeout,log){
var id = setInterval(function(){
console.log(log)
},intervalTime);
setTimeout(function(){
clearInterval(id);
}, Timeout);
}
test(1000,10000,'test1');
test(1000,1000,'test2');
I thought in the past that if I create a variable that I can overwrite them simple.
I'am trying to do the following:
var zoom = {
$el : $('#Overlay'),
nextTimer : null,
activeDetail : -1,
zo: null,
init: function() {
zoom.nextTimer = setInterval(zoom.nextLoop, 5000);
},
nextLoop: function() {
console.log("zoom.nextLoop");
}
}
$(document).on('click', function(e){
console.log("klick");
zoom.init();
});
and expected that the zoom.nextTimer will be overwritten. But it seems to be wrong, a new timer is added.
How can I overwrite it?
Please see also http://jsfiddle.net/9FXu6/
intervalID is a unique interval ID you can pass to clearInterval().
— https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
The return value of setInterval is just a number that identifies the interval. You need to call clearInterval and pass it as the argument if you want to stop the interval from running the function again.
var nextTimer = setInterval(func, time);
clearInterval(nextTimer);
You need to call clearInterval(<reference to the timer>) to make sure it won't get executed again.
You might also have more luck with setTimout which only gets called once.
I have function called rotator(id): this function animate div and I can called this function with different id for animate different elements
Actually I use 5 differents id , 1,2,3,4,5
And for call I need put :
rotador(1);rotador(2);rotador(3);rotador(4);rotador(5);
The problem it´s that I want to rotate in automatic mode. For this I think to use this
for (i=0;i<=5;i++) {
setTimeout(rotador(i),2000);
}
But it doesn't work because it animates all in the same time, no let firt execute the first and continue before of first go second , etc , etc and when go the end or number 5 start other time in one
My problem it´s this if you can help me THANKS !!! :) Regards
You are actually calling the rodator(i) function, and schedule for execution after 2 seconds the result of the rodator. In other words, your code is now equalent to:
for (i=0;i<=5;i++) {
var result = rotador(i);
setTimeout(result,2000);
}
You can accomplish this either by creating a function for the callback:
for (i=0;i<=5;i++) {
setTimeout((function(i){
return function(){
rotador(i);
}
})(i),2000 * i);
}
or you can call the next rodator in the rotador function itself:
var rotador = function(i){
// your code
if (i < 5) {
setTimeout(function(){rotaror(i + 1);}, 2000);
}
}
Note: the closure in the second example is needed to call the function with the correct value of i. We are creating an anonymous function, and create i as a local scope variable, which value won't be mutated by the outerscope changes. (we can rename i to n in the local scope, if this would be more readable). Otherwise the value of i will be 5 each time rotador is called, as the value of i would be modified before the actual function call.
since setTimeout() does not wait for the function to be executed before continuing, you have to set the delay to a different value for different items, something like 2000 * (i + 1) instead of just 2000
EDIT: yes, and you need the callback as Darhazer suggests
rotationStep(1);
function rotador(id)
{
console.log(id);
}
function rotationStep( currentId )
{
rotador(currentId);
var nextId = currentId<5 ? currentId+1 : 1;
setTimeout(function(){ rotationStep(nextId) },2000); //anonymous function is a way to pass parameter in IE
}
Use a callback:
setTimeout(function() {
rotador(i)
}, 2000)
I am trying to figure out how to work with a closure function.
On a click event, I want to determine values of parm1 and parm2 and display them in a div,
then update new values to an table with an SQL statement.
If user clicks repeatedly, I want to throttle (debounce) and only perform SQL update 5 seconds after user stops clicking. However, display of parm1 and parm2 should occur on each click.
I am unsure of how to pass the parms to the SQL process.
(function() {
// create debounced function
var d_process = $.debounce(SQLprocess, 5000);
$('#myButton').click(function() {
// determine parameters
var parm1 = 1 + 1; // edit: added var
$(".div_1").text(parm1);
var parm2 = 2+2; // edit: added var
$(".div_2").text(parm2);
d_process();
});
}());
function SQLprocess(parm1, parm2) {
//perform an SQL update
}
Reference:
http://code.google.com/p/jquery-debounce/
To pass SQLprocess with parameters to the debounce function, change this:
var d_process = $.debounce(SQLprocess, 5000);
to this:
var d_process = $.debounce(function() {SQLprocess(parm1, parm2)}, 5000);
This creates an anonymous function with no parameters that is passed to debounce. But that anonymous function calls SQLprocess with the right parmeters.
Some people ask why you can't do this:
var d_process = $.debounce(SQLprocess(parm1, parm2), 5000);
The answer is because, in the Javavscript language, SQLprocess(parm1, parm2) is a function call. It will execute that function immediately and pass the return value to $.debounce() which is not what you want. $.debounce is expecting a function with no arguments so that's what you have to pass it. The way to get your arguments to SQLprocess is to wrap that in a function that has no arguments. It does not have to be an anonymous function. It could also be like this with a named function if you want:
function myFunctionWrapper() {
SQLprocess(parm1, parm2);
}
var d_process = $.debounce(myFunctionWrapper, 5000);
I'm writing a JavaSCript class that has a method that recursively calls itself.
Scheduler.prototype.updateTimer = function () {
document.write( this._currentTime );
this._currentTime -= 1000;
// recursively calls itself
this._updateUITimerHandler = window.setTimeout( arguments.callee , 1000 );
}
Property description:
_currentTime: the currentTime of the timer in miliseconds.
_updateUITimerHandler: stores the reference so can be used later with clearTimeout().
my problem is where I'm using recursion with setTimeout(). I know setTimeout() will accept some string to execute, or a reference to a function. since this function is method of an object, I don't know how to call it from outside. so I used the second format of setTimeout() and passed in a reference to the method itself. but it does not work.
Try this:-
Scheduler.prototype.startTimer = function() {
var self = this;
function updateTimer() {
this._currentTime -= 1000;
self.hTimer = window.setTimeout(updateTimer, 1000)
self.tick()
}
this.hTimer = window.setTimeout(updateTimer, 1000)
}
Scheduler.prototype.stopTimer = function() {
if (this.hTimer != null) window.clearTimeout(this.hTimer)
this.hTimer = null;
}
Scheduler.prototype.tick = function() {
//Do stuff on timer update
}
Well the first thing to say is that if you're calling setTimeout but not changing the interval, you should be using setInterval.
edit (update from comment): you can keep a reference from the closure if used as a class and setInterval/clearInterval don't require re-referencing.
edit2: it's been pointed out that you wrote callee which will work quite correctly and 100% unambiguously.
Out of completeness, this works:
function f()
{
alert('foo');
window.setTimeout(arguments.callee,5000);
}
f();
so I tried out document.write instead of alert and that is what appears to be the problem. doc.write is fraught with problems like this because of opening and closing the DOM for writing, so perhaps what you needed is to change the innerHTML of your target rather than doc.write
You could hold a pointer towards it...
/* ... */
var func = arguments.callee;
this._updateUITimerHandler = window.setTimeout(function() { func(); }, 1000);
/* ... */