javascript - onresize 加载函数仅一次

Question

我正在尝试同时使用媒体查询和 JS。所以我需要对 4 种情况使用调整大小功能。对于每种情况，我都需要删除图片，因此我必须在调整大小时以动态方式删除它们。我有 4 个范围:1800+ - 1024 || 1024 - 640 || 640-320|| 320-问题是，即使分辨率在范围内，该功能也会启动并重新启动。所以我想检测该功能何时第一次启动并然后停止。这是我所做的:

$(window).on('resize', function() {

  // Mosaic > 1024px
  var screenW = $(window).width();
  if (screenW > 1024) {
    var size = true;
    ....
  }
  if (screenW < 1024 && screenW > 640) {
    ...
  }
  ...
}

我不知道如何在检测到 size = true 时停止调整大小..

编辑:谢谢大家!我现在有了这段代码

function checkSize()
{
    var container = jQuery('#test');
    var screenW = jQuery(window).width();
    console.log(screenW);

    if (screenW > 1800 && current != 1800)
    {
        container.empty();
        jQuery('div#test').append("1800+\n") ;
        console.log('1800');
        current = 1800;
    }
    else if (screenW < 1024 && current != 1024)
    {
        container.empty();
        jQuery('div#test').append("1024+\n") ;
        console.log('1024');
        current = 1024;
    }
    else if (screenW < 640 && current != 640)
    {
        container.empty();
        jQuery('div#test').append("640+\n") ;
        console.log('640');
        current = 640;
    }
    else if (screenW <= 320 && current != 320)
    {
        container.empty();
        jQuery('div#test').append("320+\n") ;
        console.log('320');
        current = 320;
    }

}

而且我离我想要的东西不远了，但它工作得不太好。例如 screenW <=320 似乎不起作用。 This this fiddle ..

Answer 1

编辑您需要在加载时执行一次，然后在每次调整大小时执行一次，但前提是更改范围。这是一个代码示例:

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    div#test {
        white-space:pre ;
    }
    div#minis {
        font-size:0 ;
    }
</style>
<div id="minis">
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
</div>
<div id="test"></div>

Javascript:

var current = null ;

function checkSize()
{
    var screenW = jQuery(window).width() ;

    if ( screenW > 1800 && current != 1800 )
    {
        // Do what you need to do for 1800+
        jQuery('div#test').append("1800+\n") ;
        showImages(10) ;
        current = 1800 ;
    }
    else if ( screenW > 1024 && screenW <= 1800 && current != 1024 )
    {
        jQuery('div#test').append("1024/1800\n") ;
        showImages(8) ;
        current = 1024 ;
    }
    else if ( screenW > 640 && screenW <= 1024 && current != 640 )
    {
        jQuery('div#test').append("640/1024\n") ;
        showImages(6) ;
        current = 640 ;
    }
    else if ( screenW > 320 && screenW <= 640 && current != 320 )
    {
        jQuery('div#test').append("320/640\n") ;
        showImages(4) ;
        current = 320 ;
    }
    else if ( screenW <= 320 && current != 0 )
    {
        jQuery('div#test').append("320-\n") ;
        showImages(2) ;
        current = 0 ;
    }
}

function showImages(number)
{
    var i = 1 ;
    jQuery('div#minis img').each(function(){
        if ( i > number ) jQuery(this).fadeOut() ;
        else jQuery(this).fadeIn() ;
        i++ ;
    }) ;
}

jQuery(window).resize(checkSize) ;
jQuery(document).ready(checkSize) ;

看一下 fiddle ，看看它是否按照您想要的方式工作: http://jsfiddle.net/HCc6E/2/

之前的回答---------如果你确实希望它只执行一次，你可以尝试 jQuery(window).off('resize') 而不是 var size = true。但我不明白为什么你不能在你的情况下只使用媒体查询:你能展示更多的代码或 fiddle 吗？