前端开发思想-延迟

前端开发思想-延迟

场景

我遇到了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. 已经打开的浮层会在移出时间内被关闭