jQuery keyup check and click to fire ajax

Question

I have an input that checks the password after each character entered. this adds the POST check on each key up.

When the password check is confirmed, a submit button is enabled and when you click this button it sends details to php via ajax. But its actually firing the same amount of times as the key up check. Is there a way to limit to fire only once? if I have 6 characters in my password, then its 6 times the keyup check is done and 6 times the click update fires.

Keyup Password Check

$('input[name=currentpassword]').keyup(function(){
    var currentcheck = $(this).val();
    var dataString='thisConfirm='+ currentcheck +'&userid='+$('input[name=userid]').val();
    setTimeout(function(){
        PasswordChecking =  $.ajax({
                                type:"POST",
                                url:"/assets/inc/password-check.php",
                                data:dataString,
                                dataType:'html',
                                context:document.body,
                                global:false,
                                async:true,
                                success:function(data){
                                    //return data
                                    var PasswordChecking="1";
                                    console.log(PasswordChecking);
                                    console.log("here you would decide on data for valiadation success");
                                    checkconfirms(emailconfirm, passconfirm, PasswordChecking);

                                }
                            }).responseText;
    }, 1000);

});

jQuery Update Button which sits inside checkconfirms function

$('input[name=updatedetails]').click(function(){
                    var newEmailValue = $('input[name=newemailconfirm]').val();
                    var accountID   =   $('input[name=userid]').val();              
                    var dataString='email='+ newEmailValue +'&userid='+accountID;
                    $.ajax({
                            type:"POST",
                            url:"/assets/inc/user-change-email.php",
                            data:dataString,
                            dataType:'html',
                            context:document.body,
                            global:false,
                            async:false,
                            success:function(data){
                                var overlay = $("<div/>").addClass("overlay");
                                var logindialog = $("<div/>").addClass("popup-login");
                                $("body").append(overlay);
                                $("body").append(logindialog);
                                $(".popup-login").prepend('<p><label for="email">Email</label><input type="text" name="reloginemail" id="email"></p><p><label for="password">Password</label><input type="password" name="reloginpass" id="password"></p><input type="button" name="relogindude" value="sign in">');
                                $(".overlay").fadeIn();
                                $(".popup-login").fadeIn();
                                // Once the pop up is created this enable the click function which will enable the ajax form check.
                                $('input[name=relogindude]').click(function(){
                                    var email = $('input[name=reloginemail]').val();
                                    var password = $('input[name=reloginpass]').val();              
                                    var dataStringed='newemail='+ email +'&newpassword='+password;
                                    $.ajax({
                                        type:"POST",
                                        url:"/assets/inc/login.php",
                                        data:dataStringed,
                                        success:function(data){
                                            window.location.reload();
                                        }
                                    });
                                });//End relogindude click function
                            }
                    });//End updatedetails click function

Answer 1

Try this, clearing timeout for limiting number of requests:

var timeout;
$('input[name=currentpassword]').keyup(function(){
    var currentcheck = $(this).val();
    var dataString='thisConfirm='+ currentcheck +'&userid='+$('input[name=userid]').val();
    if(typeof timeout != 'undefined') clearTimeout(timeout);
    timeout = setTimeout(function(){
        PasswordChecking =  $.ajax({
                                type:"POST",
                                url:"/assets/inc/password-check.php",
                                data:dataString,
                                dataType:'html',
                                context:document.body,
                                global:false,
                                async:true,
                                success:function(data){
                                    //return data
                                    var PasswordChecking="1";
                                    console.log(PasswordChecking);
                                    console.log("here you would decide on data for valiadation success");
                                    checkconfirms(emailconfirm, passconfirm, PasswordChecking);

                                }
                            }).responseText;
    }, 1000);

Answer 2

Aside from whether or not what you are trying to do is a good idea, if you want to stop the timeout from firing (when another key is pressed), then you will need to store the timeoutID returned by setTimeout. Then you will be able to call clearTimeout to cancel it.

So something like this fragment:

var timerID = 0;

$('input[name=currentpassword]').keyup(function(){
    //...
    if (timerID) {
        clearTimeout(timerID);
        timerID = 0;
    }
    //...
    timerID = setTimeout(function() {
    //...

Now if another key up occurs before the timeout, then the timeout won't be called for the previous key up.