延迟（）不适用于焦点（）

Question

 $(document).ready(function() { $(".cl").on("click", function() { $(".inpt").delay(5000).focus(); }); }); 

 .cl { background: #009; width: 300px; height: 100px; line-height: 100px; color: #fff; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="inpt"> <div class="cl">click me</div> 

Problem I have with the above code is that the delay() is not working on the focus() .

Answer 1

The documentation states that delay only works for animations (unless you set up a queue) , you probably just want a setTimeout instead

$(document).ready(function() {
    $(".cl").on("click", function() {
        setTimeout(function() {
            $(".inpt").focus();
        }, 5000);
    });
});

For completeness, using delay with a queue

$('.inpt').delay(5000).queue(function (next) { 
    $(this).focus(); 
    next(); 
});

Answer 2

You can try an alternative to achieve this,

 $(document).ready(function () { $(".cl").on("click", function () { setTimeout(function(){ $(".inpt").focus(); },5000); }); }); 

 .cl { background:#009; width:300px; height:100px; line-height:100px; color:#fff; text-align:center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="inpt"> <div class="cl">click me</div> 

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.

I hope this helps.