前端开发思想-延迟

前端开发思想-延迟

场景

我遇到了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: `
          

            
${item.name}
定义
${item.remarks}
行为分级


低效：
${item.inefficient}。


高效：
${item.effective}。


典范：
${item.model}。


`
});
});
}, 300);
};
function handleonmouseout(id) {
clearTimeout(hoverTimeout);
layui.use(['layer'], function () {
var $ = layui.$,
layer = layui.layer;
layer.closeAll();
});
};
</script>

解释

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