在延迟之后使用jQuery将字段聚焦在悬停上

Question

我试图在徘徊时使场地聚焦，但仅在3秒延迟之后。显然，我做错了：

＆＃13;

＆＃13;

var timer;

function focusTimer() {
    timer = setTimeout(function () {
        $('#input').focus(),
        3000;
    })
}

$('#input').hover(function () {
    if (timer) {
        clearTimeout(timer);
    }
  
    focusTimer();
});

＆＃13;

#input:focus {
    width: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input">

＆＃13;

＆＃13;

＆＃13;

Answer 1

你做错了。

您将3000置于功能内。把它移到外面

timer = setTimeout(function () {
        $('#input').focus(),
        3000;
       ^^^^^^^
    })

应该是

timer = setTimeout(function () {
        $('#input').focus();
    },3000);

片段

＆＃13;

＆＃13;

var timer;

function focusTimer() {
    timer = setTimeout(function () {
        $('#input').focus();
        
    },3000)
}

$('#input').hover(function () {
    if (timer) {
        clearTimeout(timer);
    }
  
    focusTimer();
});

＆＃13;

#input:focus {
    width: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input">

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用转换延迟：

#input {
  -webkit-transition-delay: 5s;
  transition:width 5s;
  transition-delay:5s;
  width:100px;
}

#input:focus {
  width:200px;
}

将鼠标悬停在输入上：

#input:hover {
 width:200px;
}

Answer 3

var timer;

function focusTimer() {
    timer = setTimeout(function () { //change your setTimeout like this
        $('#input').focus();
       
    },3000);

 
}

$('#input').hover(function () {
    if (timer) {
        clearTimeout(timer);
    }
  
    focusTimer();
});

#input:focus {
    width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input">

Answer 4

$("#i").hover(function() {
  setTimeout(function() {
    $("#i").focus();
  }, 1000);
})

   

#i {
  width:300px;
  transition:width 1s;

#i:focus {
    width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="i">