代码段——JS中resize事件监听窗口变化

备忘录——JS中resize事件监听窗口变化

期望实现功能

当页面宽度变窄的时候，bootstrap-table自动切换为卡牌视图

异常写法

如下实现，出现随着鼠标拖动窗口改变大小，事件触发频率太高的问题

    $(window).resize(function () {
        var a = document.documentElement.clientHeight;//获取页面可见高度
        var b = document.documentElement.clientWidth;//获取页面可见宽度
        if (b < 768) {
            $('#table').bootstrapTable('toggleView');
        }
    });

解决方案

参考 JavaScript — resize事件监听窗口变化

    //首先写一个获取窗口宽高的方法
    const getWindowInfo = () => {
        const windowInfo = {
            width: window.innerWidth,
            hight: window.innerHeight
        }
        console.log(windowInfo);

        //当页面宽度变小，则切换为卡牌视图
        if (windowInfo.width < 768) {
            $('#table').bootstrapTable('toggleView');
        }
    };


    //需要防抖，无论我们怎么拖动窗口大小，只执行一次获取浏览器宽高的方法
    //方法只会在窗口停止变化的 500 毫秒后触发一次
    const debounce = (fn, delay) => {
        let timer;
        return function () {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn();
            }, delay);
        }
    };
    const cancalDebounce = debounce(getWindowInfo, 500);

    //然后监听 resize 事件
    window.addEventListener('resize', cancalDebounce);

直接显示为卡牌视图

不要根据宽度改变来切换，直接在页面加载的时候判断，若是小于指定的宽度（手机打开）则直接设置为卡片视图

    var b = document.documentElement.clientWidth;//获取页面可见宽度
    if (b < 768) {
        $('#table').bootstrapTable('toggleView');
    }