Javascript 向mousemove事件添加延迟

我在mousemove事件上运行了这个函数。其功能是迭代图像列表，并一次移动到每个图像的顶部（z索引）。这是正确的，但我的问题是脚本运行非常快，图像显示非常快。如何向函数或事件添加延迟？我尝试了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";
            }
    }

}

//创建变量
常数imgQty=6；
const holder=document.getElementById（'holder'））
var计数器=1；
var isMoving=假；
变量bgtimeout，imgtimeout；
var bkgImgs=[]
//这将为每个img创建容器
对于（设i=1；i=imgQty？计数器=1：计数器++
holder.classList.add（'isActive'）
clearTimeout（bgtimeout）；
清除超时（imgtimeout）；
bgtimeout=setTimeout（函数（）{holder.classList.remove（'isActive'）}，150）；
moveImgs（）；
}
//这就是我的问题所在，这个函数正在工作，但并不像我预期的那样
函数moveImgs（）{
对于（变量i=0；i

我的逻辑正确吗？还是我必须重新思考代码

该事件在以下部分触发：

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

使用

类似的方法应该可以工作（从changeBkg内部删除超时）：

//更改300ms以满足您的需要

解Bounce是一个高阶函数，它是一个返回另一个函数的函数。这样做是为了围绕func、wait和immediate函数参数以及timeout变量形成闭包，以便保留它们的值

进一步阅读/如果您愿意自己实施：

问题已经解决。 因为我需要的是某种动画，所以我用greensock解决了这个问题 所以我的事件在这个动画中，当animPlay为true时触发，而当is play为false时触发

        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' )

    }

---

我建议不要使用鼠标移动事件，OnMouseCenter和onmouseleave更易于控制，对性能的影响也更小

        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' )

    }