Javascript 使用setInterval（）平滑悬停动画将闪烁并赢得'；停不下来

我试图使用

mouseover

上的

event.clientX

使一个元素追踪我的光标。要使其更平滑，一个选项是使用

setInterval（）

这就是我尝试的：

class Home extends Component {

    state = {
        left: 0
    };

    timer;

    ...

    onMouseLeave = (index) => {
        const ref = document.querySelector('.hover-text-' + index);
        ref.removeEventListener('mousemove', this.onMouseMove);
        clearInterval(this.timer);
    };

    onMouseMove = _.throttle((event) => {
        this.timer = setInterval(() => {
            this.setState({left: event.clientX})
        }, 20);
    });

    ...

    render() {
        const style = {
            top: this.state.top + 'px',
            left: this.state.left + 'px',
        };

        return (
            <div className="container-fluid container-home d-flex justify-content-center">
                <ul>
                    {this.list.map((item, index) => {
                        return (
                            <li key={index} style={{marginTop: index !== 0 ? 'mt-2' : null}}>
                                ...
                                <div id="moving-image" className={this.classList({
                                    'moving-image': true,
                                    'image-outer-container': true,
                                    [`hover-text-image-${index}`]: true,
                                    'invisible': this.state.hoveredItem !== index,
                                })}
                                style={style}>
                                    <ImageHolder image={item.image}/>
                                </div>
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

class Home扩展组件{
状态={
左：0
};
定时器；
...
onMouseLeave=（索引）=>{
const ref=document.querySelector（'.hover text-'+索引）；
ref.removeEventListener（'mousemove'，this.onMouseMove）；
clearInterval（这个计时器）；
};
onMouseMove=\节流阀（（事件）=>{
this.timer=setInterval（（）=>{
this.setState（{left:event.clientX}）
}, 20);
});
...
render（）{
常量样式={
top:this.state.top+'px'，
左：this.state.left+'px'，
};
返回(

{this.list.map（（项，索引）=>{
返回(

...

);
})}

);
}
}

---

其结果是，该元素开始可怕地闪烁，不会停止，并使我的笔记本电脑爆炸。为什么呢我怎样才能防止这种情况发生并实现我的欲望行为

节流，去抖动是你要搜索的东西，检查这个刚刚添加的去抖动：但这显然会使图像从一个值跳到另一个值。我怎样才能使这变得平滑呢？我相信你需要

节流

而不是

去盎司

，

去盎司

将阻止并放弃动画调用，

节流

另一方面将，某种程度上但不完全是，将对代码执行进行排队。实现起来非常简单，我链接的示例使用原生js在

mouseMove

@mamounothman上构建动画，使用更高的节流阀值也会导致跳跃。我正试图实现以下目标：---当时有一个不同的代码片段。