前端开发思想-延迟事件

场景

我遇到了1个业务场景，左边有N个按钮，可以拖动到右边的框内。当我的鼠标从空白处移动到左边中心部分的按钮时，路上会经过N个按钮，每个按钮都会出现浮层，体验上就很不好。于是我希望鼠标经过按钮时候不触发事件，鼠标在按钮停留超过300毫秒才出现浮层；

<script type="text/javascript">
    var hoverTimeout;

function handleMouseover(id, event, itemStr) {
    var item = JSON.parse(decodeURIComponent(itemStr));
    var liElement = event.currentTarget; // 获取当前触发事件的li元素

    hoverTimeout = setTimeout(function () {
        var rect = liElement.getBoundingClientRect(); // 获取元素的位置和尺寸信息
        var bottomLeft = { x: rect.left, y: rect.bottom };
        var bottomRight = { x: rect.right, y: rect.bottom };
        let x = (rect.left + rect.right) / 2;
        let y = rect.bottom;
        // 计算悬浮层的高度，此处假设为360px
        let layerHeight = 360;
        // 如果元素在屏幕底部，调整悬浮层的显示位置
        if (y + layerHeight > window.innerHeight) {
            y = rect.top - layerHeight;
        }

        layui.use(['layer'], function () {
            var $ = layui.$,
                layer = layui.layer;

            var that = this;
            layer.closeAll();
            layer.open({
                type: 1,
                area: ['500px'],
                title: false,
                closeBtn: 0,
                shade: 0,
                offset: [y, x],
                content: `
          <div class="box_grading">
            <div class="name">${item.name}</div>
            <div class="dingyi">定义</div>
            <div class="dingyi_text text" style="">${item.remarks}</div>
            <div class="xingwei">行为分级</div>
            <div class="xingwei_box">
              <div class="dixiao">
                <div>低效：</div>
                <div class="text" style="">${item.inefficient}。</div>
              </div>
              <div class="youxiao">
                <div>高效：</div>
                <div class="text" style="">${item.effective}。</div>
              </div>
              <div class="dianfan">
                <div>典范：</div>
                <div class="text" style="">${item.model}。</div>
              </div>
            </div>
          </div>`
            });
        });
    }, 300);
};

function handleonmouseout(id) {
    clearTimeout(hoverTimeout);

    layui.use(['layer'], function () {
        var $ = layui.$,
            layer = layui.layer;
        layer.closeAll();
    });
};

</script>

解释

1. 在代码中添加了一个名为hoverTimeout的变量，用于存储定时器对象。
2. 当鼠标悬停在<li>元素上时，触发handleMouseover函数。
3. 在handleMouseover函数中，首先解析传入的参数并获取相关信息。
4. 通过setTimeout函数设置延迟事件，延迟500毫秒执行。如果300毫秒内移出了，移除函数会删除这个事件，所以事件不会执行；
5. 已经打开的浮层会在移出时间内被关闭