jQuery setTimeout won't work

Question

I'm trying to compare two password fields and show a Popover if they don't match.

HTML

<div class="form-group col-lg-6">
    <label>Password</label>
    <input type="password" class="form-control" name="password" id="password" required data-toggle="popover" title="Password Strength" value="" placeholder="Enter your password...">
</div>
<div class="form-group col-lg-6">
    <label>Repeat Password</label>
    <input type="password" class="form-control" name="passwordrep" id="passwordrep" value="" data-bind="popover" data-content="No match" placeholder="Confirm password...">
</div>

My jQuery Code works if i'm not using setTimeout. But i want to wait for a few seconds before showing the "no match" popover.

JS

function showPopover(id){
  $(id).popover('show');
}

var x_timer;

$("body").delegate('#passwordrep', 'keyup', function(){
    clearTimeout(x_timer);

    if($(this).val() != $('#password').val()){
      x_timer = setTimeout(function(){showPopover(this);}, 1000);
    }
    else {
      $(this).popover('hide');
    }
});

Answer 1

this doesn't refers to element which invoked the event handler in the setTimeout argument. You can pass parameters to setTimeout which will be available to the function

setTimeout(function(elem){
   showPopover(elem);
}, 1000, this);

Note: delegate() has been deprecated. It was superseded by the .on() method since jQuery 1.7,

---

You can also use .bind()

setTimeout((function(){
   showPopover(this);
}).bind(this), 1000);

Answer 2

function checkPassword(elt1,elt2){
    return elt1.value()==elt2.value();
}

you can call it on keyup , you can add if to show some message

Answer 3

Thanks! It worked with .bind() I love you guys