JavaScript Keyboard repeat delay problems

I would like to create game controlled by wasd keys but it doesn’t work as i thought. At any movement it make at first small step and then it’s repeating movement without delay. Here’s the code:

var Player = document.getElementById("Player");
const SpeedX = 35;
const SpeedY = 20;
var x = parseInt(getComputedStyle(Player).marginLeft);
var y = parseInt(getComputedStyle(Player).marginTop); 

var keysPressed = {};

document.addEventListener("keydown", (e) => {
        keysPressed[e.key] = true;

        if(e.key == 'w') {
        if(y > 30 && y < 950) {
            y -= SpeedY;
            Player.style.marginTop = y + "px";
            console.log(y);
        } else if(y == 950) Player.style.marginTop = (y -= SpeedY) + "px";
    }
        if(e.key == 'a') {
        if(x > -5 && x < 1780) {
            x -= SpeedX;
            Player.style.marginLeft = x + "px";
            console.log(x);
        } else if(x == 1780) Player.style.marginLeft = (x -= SpeedX) + "px";
    }
        if(e.key == 's') {
        if(y > 30 && y < 950) {
            y += SpeedY;
            Player.style.marginTop = y + "px";
            console.log(y);
        } else if(y == 30) Player.style.marginTop = (y += SpeedY) + "px";
    }
        if(e.key == 'd') {
        if(x > -5 && x < 1780) {
            x += SpeedX;
            Player.style.marginLeft = x + "px";
            console.log(x);
        } else if(x == -5) Player.style.marginLeft = (x += SpeedX) + "px";
    }
        if(e.key == 'w' && keysPressed['a']) {
            if(x > -5 && x < 1780 && y > 30 && y < 950) {
            y -= SpeedY;
            x -= SpeedX;
            Player.style.marginLeft = x + "px";
            Player.style.marginTop = y + "px";
        }}
        if(e.key == 'w' && keysPressed['d']) {
            if(x > -5 && x < 1780 && y > 30 && y < 950) {
            y -= SpeedY;
            x += SpeedX;
            Player.style.marginLeft = x + "px";
            Player.style.marginTop = y + "px";
        }}
        if(e.key == 's' && keysPressed['a']) {
            if(x > -5 && x < 1780 && y > 30 && y < 950) {
            y += SpeedY;
            x -= SpeedX;
            Player.style.marginLeft = x + "px";
            Player.style.marginTop = y + "px";
        }}
        if(e.key == 's' && keysPressed['d']) {
            if(x > -5 && x < 1780 && y > 30 && y < 950) {
            y += SpeedY;
            x += SpeedX;
            Player.style.marginLeft = x + "px";
            Player.style.marginTop = y + "px";
        }}
        if(e.key == 'a' && keysPressed['w']) {
            if(x > -5 && x < 1780 && y > 30 && y < 950) {
            y -= SpeedY;
            x -= SpeedX;
            Player.style.marginLeft = x + "px";
            Player.style.marginTop = y + "px";
        }}
        if(e.key == 'd' && keysPressed['w']) {
            if(x > -5 && x < 1780 && y > 30 && y < 950) {
            y -= SpeedY;
            x += SpeedX;
            Player.style.marginLeft = x + "px";
            Player.style.marginTop = y + "px";
        }}
        if(e.key == 'a' && keysPressed['s']) {
            if(x > -5 && x < 1780 && y > 30 && y < 950) {
            y += SpeedY;
            x -= SpeedX;
            Player.style.marginLeft = x + "px";
            Player.style.marginTop = y + "px";
        }}
        if(e.key == 'd' && keysPressed['s']) {
            if(x > -5 && x < 1780 && y > 30 && y < 950) {
            y += SpeedY;
            x += SpeedX;
            Player.style.marginLeft = x + "px";
            Player.style.marginTop = y + "px";
        }}
    })

document.addEventListener('keyup', (event) => {
    delete keysPressed[event.key];
});

It looks not so nice when it’s not moving smoothly. Please Help

I’ve looked for some solutions in browser but i can’t find anything useful at my case