javascript - 根据屏幕尺寸更改功能

Question

我正在尝试根据用户屏幕尺寸执行功能。我设法使用以下代码来做到这一点:

var width = $(window).width();

    if (width > 1000) {
        slideshow();
        tablet();
        if (width > 1600) {
            audio();
        }
    }
    else {
        phone();
        $('.menu').localScroll();   
    }

当用户在网站内更改屏幕尺寸(例如调整大小或更改方向模式)时，之前执行的功能仍然有效，这会与尝试执行的最新功能发生冲突.

我尝试将以下代码添加到上面列出的代码中:

    $(window).resize(function() {
    $('.logo').unbind();
    $('.menu-item').unbind();
    $('.menuList').unbind();
    $('.icon-menu').unbind();
    $('.menuListItem').unbind();
    $('.menu').unbind();
    $('.info').unbind();

    if (width > 1000) {
        slideshow();
        tablet();
        if (width > 1600) {
            audio();
        }
    }
    else {
        phone();
        $('.menu').localScroll();   
    }
});

当用户调整浏览器大小时，此代码 .unbind() 受先前函数影响的每个元素，但它仍然加载先前的函数(手机/平板电脑)。

我正在寻找一种方法来在调整屏幕尺寸时删除不必要的功能。

实时示例可以在this website查看

Answer 1

试试这个:

function res(){
        var width = $(window).width();
        $('.logo').unbind();
        $('.menu-item').unbind();
        $('.menuList').unbind();
        $('.icon-menu').unbind();
        $('.menuListItem').unbind();
        $('.menu').unbind();
        $('.info').unbind();
    }
$(window).ready(res).resize(res);