Javascript onresize加载函数只需一次

我尝试使用媒体查询和JS。所以我需要对4种情况使用resize函数。 对于每种情况，我都需要删除图片，所以我必须在调整大小时以动态方式删除它们。 我有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) {
    ...
  }
  ...
}

$（窗口）.on（'resize'，function（））{
//马赛克>1024px
var screenW=$（window.width（）；
如果（屏幕宽度>1024）{
变量大小=真；
....
}
如果（屏幕宽度<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;
    }

}

函数checkSize（）
{
var container=jQuery（'#test'）；
var screenW=jQuery（window）.width（）；
控制台日志（screenW）；
如果（屏幕宽度>1800&¤t！=1800）
{
container.empty（）；
jQuery（'div#test'）。追加（“1800+\n”）；
控制台日志（'1800'）；
电流=1800；
}
else if（屏幕宽度<1024&¤t！=1024）
{
container.empty（）；
jQuery（'div#test'）。追加（“1024+\n”）；
console.log（'1024'）；
电流=1024；
}
否则如果（屏幕W<640&¤t！=640）
{
container.empty（）；
jQuery（'div#test'）。追加（“640+\n”）；
console.log（'640'）；
电流=640；
}
否则如果（屏幕w编辑
您需要在加载时执行一次，然后在每次调整大小时执行一次，但前提是更改范围。
下面是一个代码示例：

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>


div#测试{
空白：预处理；
}
小分队{
字号：0；
}

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

var电流=null；
函数checkSize（）
{
var screenW=jQuery（window）.width（）；
如果（屏幕宽度>1800&¤t！=1800）
{
//做你需要做的事情+
jQuery（'div#test'）。追加（“1800+\n”）；
展示图片（10）；
电流=1800；
}
否则如果（screenW>1024&&screenW 640&&screenW 320&&screenW我希望它只执行一次，但如果我们从320传递到1024，然后再传递到320，它必须工作这应该是一个注释而不是一个答案谢谢这个示例，非常有用。但是对于.one，它的工作方式是相同的。我需要使用js，因为随着宽度的减小，我需要擦除图片。这里我问题是，每次马赛克改变时，我都需要从一开始就重新加载马赛克。你叫什么擦除？你只想在屏幕大小改变时隐藏它们？或者真的擦除文件？你能显示你现在有什么和/或你想要什么吗（例如320 wich和640 wich的屏幕截图）可能重复$（窗口）。on（'resize'，function（）{=>在我的代码中已经有一个.on而不是on。不同的方法对我来说是正确的！但是它的工作方式与以前相同，刷新后消失的图片在resize时不会消失。。