onMouseLeave и onMouseOut активируются слишком быстро;

Question

Есть ли способ снизить чувствительность стрельбы по событиям onMouseLeave или onMouseOut. Потому что я хочу применить их для всплывающего диалога, за исключением того, что они запускаются все время, когда мышь находится над текстом (т. Е. Тегом div), только когда я полностью успокоюсь, они не запускаются, и всплывающее диалоговое окно в порядке, Функциональные возможности, очевидно, работают, но чувствительность событий мыши слишком высока.

Вот мои самые важные части кода:

<div className="titleUnderLogo">
                <br /> <br />
                {applicationDataDefinition.map((item) =>
                    <div className="titleUnderLogo" onMouseOver = {this.mouseOver} onMouseLeave={this.mouseLeave} /* Tried with this also onMouseOut={this.mouseOut} */  > 

                        {item.name} {item.release} - {item.level} - {item.location}
                    </div>
                )}
                <br /> <br />
                <Container >
                    <Dialog 
                        displayed = {showDialog}
                        title="Product name"
                        modal={true}
                        layout="center"
                        defaultFocus="#ok"
                        ui="titleUnderLogoCls"
                        closeAction="hide"
                        maskTapHandler={this.mouseTapped}
                        onHide={() => this.setState({ showDialog: false })}
                    >
                        {applicationDataDefinition.map((item) => 
                            <div>
                                <table>
                                    <tr>
                                        <td> <b> Product name: </b> </td> 
                                        <td> {item.name} </td>
                                    </tr>
                                    <tr>
                                        <td> <b> Release: </b> </td>
                                        <td>  {item.release}  </td>
                                    </tr>
                                    <tr>
                                        <td> <b> Last fix installed: </b> </td> 
                                        <td> {item.lastFix}  </td>
                                    </tr>
                                    <tr>
                                        <td> <b> Environment: </b> </td>
                                        <td> {item.level} </td>
                                    </tr>
                                        <td> <b> Location: </b>  </td>
                                        <td> {item.location} </td>
                                </table>
                            </div>
                        )}
                    </Dialog>
                </Container>
</div>

Answer 1

Вы можете ограничить событие, используя lodash.throttle

element.addEventListener('mouseout', _.throttle(callback, 100)); // 100 miliseconds

callback это функция, которую вы делаете при мышлении

РЕДАКТИРОВАТЬ

Ну, я не понимаю, реагировать, но, как я вижу, должно быть что-то вроде этого

this.mouseOver // кажется, что метод в вашей ViewModel так

mouseOver: _.throttle(() => {
        // do something here or call another function like
        this.yourFunctionFromViewModelForMouseOver();
},100)

То же самое для onMouseLeave={this.mouseLeave}

mouseLeave: _.throttle(() => {
            // do something here or call another function like
            this.yourFunctionFromViewModelForMouseLeave();
    },100)

Answer 2

Пытаться lodash.debounce => ссылка

Использование:

import _debounce from "lodash.debounce"
/* add this to countructor function or anywhere before you use mouseLeave function */
this.mouseLeave = _debounce(this.mouseLeave, 300); // 300 milliseconds