Добавить задержку к событию mousemove - PullRequest
Новая
       30

Добавить задержку к событию mousemove

0 голосов
/ 29 октября 2019

Эта функция запущена при событии mousemove. Функциональность состоит в том, чтобы перебирать список imgs и переходить к вершине (z-index) по одному за раз. Это работает правильно, но проблема в том, что скрипт работает очень быстро, а изображения отображаются очень быстро. Как добавить задержку к функции или событию? Я пытался с setTimeOut без каких-либо положительных эффектов

Вот код 

// creating variables
const imgQty = 6;
const holder = document.getElementById('holder')
var counter = 1;
var isMoving = false;
var bgtimeout, imgtimeout;
var bkgImgs = []

// this creates the containers for each img

for (let i = 1; i <= imgQty; i++) {
    var newDiv = document.createElement('div');
    newDiv.classList.add('background')
    newDiv.classList.add(`background--${i}`)
    newDiv.setAttribute("style", `background-image: url('imgs/${i}.jpg'); z-index: 0;`);
    holder.appendChild(newDiv);
    bkgImgs.push(newDiv)
}

//this moves the counter and also hides the images when the mouse is not moving

function changeBkg(e){
    counter >= imgQty ? counter = 1 : counter++

    holder.classList.add('isActive')
    clearTimeout(bgtimeout);
    clearTimeout(imgtimeout);

    bgtimeout = setTimeout(function(){holder.classList.remove('isActive')}, 150);

    moveImgs();

}

// and here is where my issue is, this function is working but not as I expected

function moveImgs(){

    for(var i = 0; i < bkgImgs.length; i++){
            if(bkgImgs[i].classList.contains(`background--${counter}`)){
                    bkgImgs[i].style.zIndex = "1";
            } else{
                bkgImgs[i].style.zIndex = "0";
            }
    }

}

Правильна ли моя логика? или мне нужно переосмыслить код?

событие происходит в разделе: 

<section class="main" onmousemove="changeBkg(event)"></section>

Ответы [ 2 ]

1 голос
/ 29 октября 2019

Использование Дебад

Что-то вроде этого должно работать (убрать тайм-аут изнутри changeBkg): 

//change 300ms to suite your needs
<section class="main" onmousemove="debounce(changeBkg(event),300)"></section>

Дебадинг - это более высокий порядокфункция, которая является функцией, которая возвращает другую функцию. Это делается для формирования замыкания вокруг параметров функций func, wait и немедленного доступа и переменной timeout, чтобы их значения сохранялись.

Дальнейшее чтение / если вы предпочитаете реализовать себя: Деблокировать статью

0 голосов
/ 29 октября 2019

Это было решено. Поскольку мне нужна была какая-то анимация, я понял это с помощью greensock. Так что мое событие имеет внутри этой анимации, которая срабатывает, когда animPlay имеет значение true, а когда воспроизведение остается ложным 

        if(animPlay){
        animPlay = false
        var tl = new TimelineMax();
        tl.staggerFromTo(bkgImgs, .5, {zIndex:0}, {zIndex:1}, .15, 0)
        .set(bkgImgs, {zIndex:0, onComplete:() => animPlay = true}, '+=0' )

    }
...