は関数を実行し、次の関数の実行を一時停止します。JS

Question

今のところ、キーが押されると色が変わり、すぐに色が変わります。しかし、これは本当に速く、ちょっとした片頭痛の原因となります。

キーを押したときに変更を保存すると、2〜2秒間の変更が保存され、元の色に戻ります。これらの内部にない他の機能を一時停止することはありません。このライン間

$(window).on('keydown', function (e) { 
 
    if (e.keyCode == 39 || e.keyCode == 32) { 
 
     $('body').css('background', '#26A65B'); 
 
     $('#word').css('color', '#415A77'); 
 
    } 
 
    if(e.keyCode == 37) { 
 
     $('body').css('background', '#D64541'); 
 
     $('#word').css('color', '#415A77'); 
 
    } 
 
    }); 
 
$(window).on ('keyup', function (e) { 
 
    if (e.keyCode == 39 || e.keyCode == 32 || e.keyCode == 37) { 
 
     $('body').css('background', '#415A77'); 
 
     $('#word').css('color', '#ed7d3a'); 
 
    } 
 
});

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

Answer 1

何かがあなたを助ける必要があります。あなただけsetTimeoutはあなたを助けるないため,,それぞれの新しいKeyDownイベントがちょうどsetTimeoutを壊す原因となり、その後、片頭痛効果:)左右の矢印キーで

テストをする機会を増やす、ヘルパーなど、いくつかのフラグ変数を配置する必要があります：

$('body').focus(); 
 
var flag = false; 
 
$(window).on('keydown', function (e) { 
 
    if (flag) return; 
 
    if (e.keyCode == 39 || e.keyCode == 32) { 
 
     $('body').css('background', '#26A65B'); 
 
     $('#word').css('color', '#415A77'); 
 
    } 
 
    if(e.keyCode == 37) { 
 
     $('body').css('background', '#D64541'); 
 
     $('#word').css('color', '#415A77'); 
 
    } 
 
    }); 
 
$(window).on ('keyup', function (e) { 
 
    if(flag) return; 
 
    if(! flag) flag = true; 
 
    setTimeout(function(){ 
 
     flag = false; 
 
     if (e.keyCode == 39 || e.keyCode == 32 || e.keyCode == 37) { 
 
     $('body').css('background', '#415A77'); 
 
     $('#word').css('color', '#ed7d3a'); 
 
     } 
 
    }, 2000); 
 
    });

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

Answer 2

それぞれからkeyupにtimeoutを使用してください。すでにタイムアウトが実行されている場合は、clear itと別のタイムアウトを設定します。

let timeout = null; 
 
$(window).on('keydown',(e => { 
 
    if (e.keyCode == 39 || e.keyCode == 32) { 
 
    $('body').css('background', '#26A65B'); 
 
    $('#word').css('color', '#415A77'); 
 
    } 
 
    if (e.keyCode == 37) { 
 
    $('body').css('background', '#D64541'); 
 
    $('#word').css('color', '#415A77'); 
 
    } 
 
})); 
 
$(window).on('keyup',(e => { 
 
    if (e.keyCode == 39 || e.keyCode == 32 || e.keyCode == 37) { 
 
    if (timeout !== null) { 
 
     clearTimeout(timeout); 
 
    } 
 
    timeout = setTimeout(() => { 
 
     $('body').css('background', '#415A77'); 
 
     $('#word').css('color', '#ed7d3a'); 
 
    }, 2000); 
 
    } 
 
}));

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