Javascript：按几下gif'；崩溃'/在单个帧上暂停_Javascript

Javascript：按几下gif'；崩溃'/在单个帧上暂停

javascript

Javascript：按几下gif'；崩溃'/在单个帧上暂停,javascript,Javascript,我有一个div，当你按下x键时，我会附加一个“kick”类。kick类有一个gif背景图像。第一次按x键时，gif加载良好。第二次加载时，它看起来像“马车”，第三次、第四次等按键时，gif被冻结在单个帧上。您可以在此链接中按x几次来进行测试：这是我的密码： <!DOCTYPE html> <html> <head> <style> #test{ background-repeat: no-repeat;

我有一个div，当你按下x键时，我会附加一个“kick”类。kick类有一个gif背景图像。第一次按x键时，gif加载良好。第二次加载时，它看起来像“马车”，第三次、第四次等按键时，gif被冻结在单个帧上。您可以在此链接中按x几次来进行测试：

这是我的密码：

<!DOCTYPE html>
<html>
<head>
    <style>
    #test{
        background-repeat: no-repeat;
        height: 640px;
        /*0 40 58*/
        position: relative;
        left: 0px;
        top: 0px;
    }
    .image{
        background-image: url('images/sidestepken.png');
        width:9%;
    }
    .kick{
        background-image: url('images/weirdkick.gif');
        width: 100%;
    }
    .first{
        background-image: url('images/sidestepken.png');
        width:9%;
        background-position:0% 0%;
    }
    .second{
        background-image: url('images/sidestepken.png');
        background-position:40% 0%;
        width:9%;
    }
    .third{
        background-image: url('images/sidestepken.png');
        background-position:58% 0%;
        width:9%;
    }

    </style>
</head>
<body>
    <div id="test"></div>


#试验{
背景重复：无重复；
高度：640px；
/*0 40 58*/
位置：相对位置；
左：0px；
顶部：0px；
}
.形象{
背景图片：url（'images/sidestepken.png'）；
宽度：9%；
}
.踢{
背景图片：url（'images/weirdkick.gif'）；
宽度：100%；
}
.首先{
背景图片：url（'images/sidestepken.png'）；
宽度：9%；
背景位置：0%0%；
}
.第二{
背景图片：url（'images/sidestepken.png'）；
背景位置：40%0%；
宽度：9%；
}
.第三{
背景图片：url（'images/sidestepken.png'）；
背景位置：58%0%；
宽度：9%；
}

javascript：（stackoverflow忽略了我的js，但这是在脚本标记内：）

document.getElementById（'test'）。className='image'；
设lefter=0；
设uper=0；
window.addEventListener（'keydown'，函数（e）{
如果（e.code==='KeyX'）{
console.log（'test'）；
document.getElementById（'test'）。className='kick'；
setTimeout（函数（）{
document.getElementById（'test'）。className='image'；
},2000);
}
如果（e.code==='ArrowLeft'）{
左撇子-=10；
changepos（）；
}
如果（e.code==='ArrowRight'）{
左撇子+=10；
changepos（）；
}
})
设计数器=0；
函数changepos（）{
计数器++；
document.getElementById（'test'）.style.top=uper+'px'；
document.getElementById（'test'）.style.left=lefter+'px'；
如果（计数器==1）{
console.log（'first'）；
document.getElementById（'test'）。className='first'；
}
如果（计数器==2）{
console.log（'second'）；
document.getElementById（'test'）。className='second'；
}   
如果（计数器==3）{
console.log（'third'）；
document.getElementById（'test'）。className='third'；
计数器=0；
}
}

setTimeout

返回一个句柄，以便在超时结束后清除超时。它可能会停止问题SetTimeout触发一次，所以谁在乎清除它呢似乎GIF不是一个连续的动画。。。与击键无关--查看图像。。。它只是停止了什么？如果在setTimeout延迟之后需要执行一个操作，并且设置超时的函数在延迟之前运行，是的，您需要清除它。我试图指出，清除或不清除setTimeout与问题无关-我猜我的英语不雅观

document.getElementById('test').className = 'image';
let lefter = 0; 
let uper = 0;
window.addEventListener('keydown',function(e){
    if(e.code === 'KeyX'){
        console.log('test');
        document.getElementById('test').className = 'kick';
        setTimeout(function(){
            document.getElementById('test').className = 'image';
        },2000);

    }
    if(e.code === 'ArrowLeft'){
        lefter -= 10;
        changepos();
    }
    if(e.code === 'ArrowRight'){
        lefter += 10;
        changepos();
    }
})
let counter = 0;
function changepos(){
    counter++;
    document.getElementById('test').style.top = uper + 'px';
    document.getElementById('test').style.left = lefter + 'px';
    if(counter === 1){
        console.log('first');
     document.getElementById('test').className = 'first';
    }
    if(counter === 2){ 
        console.log('second');
     document.getElementById('test').className = 'second';
    }   
    if(counter === 3){
        console.log('third');
     document.getElementById('test').className = 'third';
     counter = 0;
    }
}


</body>
</html>