代碼段——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');
    }