CODEWITHSUNDEEP
javascriptjqueryajax
DragonFire
DragonFire

Reputation: 4092

delay a keyup function (which as jquery and ajax validation)

var validate_email_login = function()
{
    console.log("validate-email");
    var item5 = $("#user_email2").val();
    var item5 = item5.toLowerCase();
    if (item5.length < 6 || item5.length > 50)
    {
        $("#errormsg6").html("Email : 6 - 50 Characters");
    }
    else
    {
        if (!emailformat.test(item5))
        {
            $("#errormsg6").html("Wrong Email Format");
        }
        
    }
}

var delay = (function() {
  var timer = 0;
  return function(cb, ms) {
    // ------------^
    clearTimeout(timer);
    timer = setTimeout(cb, ms);
    //-----------------^
  };
})();

$("#user_email2").keyup(function() {
  delay(function() {
   validate_email_login();
  }, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="email" class="homepage"  name="user_email2" id="user_email2" placeholder="Email" maxlength="50"  />

<div  id ="errormsg6"></div>

i have a function for validation based on jquery and ajax.. i want to delay the entire thing... on keyup the function includes jquery as well as ajax...

html

<input type="email" class="homepage"  name="user_email2" id="user_email2" placeholder="Email" maxlength="50"  />

jquery and ajax

var validate_email_login = function()
{
    console.log("validate-email");
    var item5 = $("#user_email2").val();
    var item5 = item5.toLowerCase();
    if (item5.length < 6 || item5.length > 50)
    {
        $("#errormsg6").html("Email : 6 - 50 Characters");
    }
    else
    {
        if (!emailformat.test(item5))
        {
            $("#errormsg6").html("Wrong Email Format");
        }
        else
        {
            $.ajax(
            {
                type: 'POST',
                url: 'classes/validatelogin.php?f=1',
                data: "user_email2=" + item5,
                success: function(msg)
                {
                    if (msg == "ok")
                    {
                        $("#errormsg6").html("Email Does Not Exist");
                    }
                    else if (msg == "exists")
                    {
                        user_email2 = "1";
                        $("#errormsg6").html("");
                    }
                }
            });
        }
    }
}

The delay function is as per following

var delay = (function()
{
    var timer = 0;
    return function(ms)
    {
        clearTimeout(timer);
        timer = setTimeout(ms);
    };
})();

$("#user_email2").keyup(function()
{
    delay(function()
    {
        validate_email_login;
    }, 1000);
});

However I am not getting the delay... is there something i am missing i am a newbee in javascript.....

Upvotes: 0

Views: 362

Answers (1)

synthet1c
synthet1c

Reputation: 6282

You needed to pass a callback into your delay function, and call it with setTimeout.

function validate_email_login() {
  //...stuff
}

var delay = (function() {
  var timer = 0;
  return function(cb, ms) {
    // -----------^
    clearTimeout(timer);
    timer = setTimeout(cb, ms);
    //-----------------^
  };
})();

$("#user_email2").keyup(function() {
  delay(validate_email_login, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user_email2" placeholder="keyup"/>

Upvotes: 1

Related Questions