Question

例如，我有2个媒体查询1024及以上，1023及以下。

如果某个功能在1023及以下运行，如果屏幕更改为1024及以上，有没有办法让它重新运行？

我正在制作会加载的条形图，如果它们在较小的屏幕上加载，那么它们的数据会稍微偏离。

我尝试过使用它无济于事：

JS：

if($(window).width() >= 1024){
setTimeout(function () {
    $('.bar').each(function () {
        $(this).find('.load').each(function () {
            $(this).animate({
                width: ($(this).parent().width() - 110) * $(this).parent().attr('data-percent') / 100
            }, 2000);
        });
    });
}, 5000);
}

else {
    setTimeout(function () {
    $('.bar').each(function () {
        $(this).find('.load').each(function () {
            $(this).animate({
                width: ($(this).parent().width() - 110) * $(this).parent().attr('data-percent') / 100
            }, 2000);
        });
    });
}, 5000);
}

任何人都知道如何做到这一点？谢谢！

Answer 1

如上所述，$(window).resize()事件可以解决问题：

var resizeTimer;

    //Event to handle resizing
    $(window).resize(function () 
    {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(Resized, 100);
    });

    //Actual Resizing Event
    function Resized() 
    {
        alert("Resized");
    };

simple jSFiddle Demo

注意：

代码使用这个技巧/概念来避免激发太多次并加重你的UI：

http://joshbroton.com/hooking-up-to-the-window-onscroll-event-without-killing-your-performance/

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Answer 2

您可以利用CSS的媒体查询工具作为触发器的基础。我会考虑将代码放在div中。当屏幕大小改变时，在不同的@media屏幕设置下重新引用div。您可能需要在两个不同的div名称下复制代码，并根据需要翻转引用。

Answer 3

$(window).on('resize', function (e) {
    if (window.foo) clearTimeout(window.foo);

    window.foo = setTimeout(function () {
        //reload your page after resize (not the best way... but works)
        this.location.reload(false);

        //or reexecute your function (better :) )
        //...
    }, 100);
});

有没有办法在屏幕更改后重新运行一个函数？

3 个答案: