Jquery delay function not working

Question

I have an password field and an small icon on right and I want to show the inputted password for 2 sec when user click on the icon. What I have done is.

$("#showpass").click(function(){
   $('#pass').attr('type','text').delay(2000).attr('type','password');
);

It does nothing but when I only do $('#pass').attr('type','text') it works without any issue.

If i'm not mistaken, not all browsers support the changing of an input type. — putvande, Mar 30 '14 at 18:18
Ah I see.. IE didn't support it in the past.. but it does now. — putvande, Mar 30 '14 at 18:29

score 1 · Answer 1 · answered Mar 30 '14 at 18:15

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

better use it only for animation issues :

https://api.jquery.com/delay/

use setTimeout instead.

score 1 · Accepted Answer · answered Mar 30 '14 at 18:17

Delay only works with functions that use the jQuery queue such as animations, thus you are getting no delay between setting the type to text and type back to password.

Your particular issue can be solved with setTimeout().

$("#showpass").click(function(){
   var pass = $('#pass').attr('type','text');
   setTimeout(function() {
       pass.attr('type','password');
   }, 2000);
);

Jquery delay function not working

2 Answers2

Linked