有没有办法在更改屏幕大小后重新运行功能? [英] Is there a way to make a function rerun after a screensize change?

问题描述

例如，我有2个媒体查询，分别为1024以上和1023以下.

For example, I have 2 media queries 1024 and up, and 1023 and down.

如果某个功能在1023及更低版本中运行，如果将屏幕更改为1024及更高版本，是否可以使其重新运行?

If a function runs in the 1023 and down, is there a way to make it re run if the screen is changed to 1024 and up?

我正在制作将要加载的条形图，如果它们在较小的屏幕上加载，则其数据会略有偏移.

I am making bars that will load, and if they load at a smaller screen then their data is slightly off.

我尝试使用此方法无济于事:

I have tried using this to no avail:

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);
}

任何人都知道如何实现这一目标吗?谢谢！

Anyone have any idea how to accomplish this? Thanks!

推荐答案

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

As mentioned above, the $(window).resize() event would do the trick:

var resizeTimer;

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

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

简单的jSFiddle演示

注意:

代码使用此技巧/concept来避免触发太多次并加重您的UI:

The code uses this trick /concept to avoid firing too many times and burdening your UI:

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

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

这篇关于有没有办法在更改屏幕大小后重新运行功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！