javascript, problem, mousemove, position

pytanie zadane 1 maja 2020 w JavaScript przez kubaa322 Użytkownik (710 p.)
zmienione kategorie 1 maja 2020 przez kubaa322

Witam, mam problem z javascriptem. Otóż poniższy kod powinien wyświetlać element o id = 'v' w losowych miejscach na stronie co 500ms, jednak nie wiem dlaczego elementy zmieniają pozycję dużo szybciej.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel = 'stylesheet' href = 'style.css'>
    <script src = 'main.js' defer></script>
</head>
<body>
    <div id = 'x'></div>
    <div id = 'y'></div>
    <div id = 'z'></div>
    <div id = 'v'></div>
</body>
</html>

CSS:

body{
    overflow: hidden;
}
#z{
    background-color: black;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
#v{
    background-color: blue;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: fixed;
}

JS:

window.addEventListener('mousemove', function (e){
    let x = document.getElementById('x');
    let y = document.getElementById('y');
    let z = document.getElementById('z');
    let v = document.getElementById('v');
    if(e.x !== null && e.y !== null){
        setTimeout(function(){
            z.style.position = 'absolute';
            z.style.left = e.x + 'px';
            z.style.top = e.y + 'px';
        },50);
     }
        let width = window.innerWidth;
        let height = window.innerHeight;
        setInterval(randomize,500);
        function randomize(){
        let randomWidth = Math.floor(Math.random() * width);
        let randomHeight = Math.floor(Math.random() * height);
        v.style.top = randomWidth + 'px';
        v.style.left = randomHeight + 'px';    
    }
});

komentarz 1 maja 2020 przez pablop76 VIP (123,180 p.)

zmień kategorie pytania na javascript

1 odpowiedź

odpowiedź 1 maja 2020 przez pablop76 VIP (123,180 p.)
edycja 1 maja 2020 przez pablop76

Ponieważ twój interwał (a więc i funkcja randomize) jest odpalany tyle razy ile razy ruszysz myszką. Możesz np. dodać flagę i zmienić ją przy starcie, ustawiając np. identyfikator interwału

komentarz 1 maja 2020 przez kubaa322 Użytkownik (710 p.)

w jaki sposób mogę to zrobić?

komentarz 1 maja 2020 przez kubaa322 Użytkownik (710 p.)

@pablop76, okej udało mi się to naprawić, jednak mam kolejne pytanie. Czy da się jakoś argument funkcji (e) wyciągnąć tak aby event mousemove dalej działał, ale żebym mógł tego argumentu (e) używać w innych funkcjach?

komentarz 1 maja 2020 przez pablop76 VIP (123,180 p.)

Albo odpalasz funkcje wewnątrz tak jak randomize() albo aktualizujesz zmienna poza scope funkcji i masz do niej dostęp poza funkcją, funkcja może zwracać jakąś wartość, jest zasięg leksykalny, są domknięcia, zależy co Ci potrzeba.