我的index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="test-1">
<img id="test" src="thumb1.png" width="15%" onmouseover="over(this)"
onmouseout="out(this)">
</div>
<script>
function over(x) {
document.getElementById('test').setAttribute('src','thumb.webp');
document.getElementById('test').setAttribute('width','15%');
var Delay;
Delay = setTimeout(thumb2, 4000);
}
function out(x) {
document.getElementById('test').setAttribute('src','thumb1.png');
}
function thumb2(){
document.getElementById('test').setAttribute('src','thumb2.png');
}
</script>
</body>
</html>
嗨，我已经进行了一些搜索，但没有令人满意的解决方法。
我想要一些解决方案：
onmouseover事件被执行，并且1秒钟后，onmouseout事件也被调用，并且setTime由over函数继续计数，重现视觉错误。调用
setTimer事件时，有什么方法可以打破onmouseover事件调用的onmouseout吗？ 最佳答案
使用clearTimeout
<script>
var Delay;
function over(x) {
document.getElementById('test').setAttribute('src','thumb.webp');
document.getElementById('test').setAttribute('width','15%');
Delay = setTimeout(thumb2, 4000);
}
function out(x) {
clearTimeout(Delay);
document.getElementById('test').setAttribute('src','thumb1.png');
}
function thumb2(){
document.getElementById('test').setAttribute('src','thumb2.png');
}
</script>
您可以在w3wchools.com上看到一个有效的示例