有没有办法将 $(document).ready 和 $(window).resize 组合在一起，以便它们只调用 1 个函数？答案

【问题标题】：Is there a way to combine $(document).ready and $(window).resize together so they call only 1 function?有没有办法将 $(document).ready 和 $(window).resize 组合在一起，以便它们只调用 1 个函数？
【发布时间】：2015-07-06 03:38:32
【问题描述】：

我在下面有以下代码，每次我运行文件时，$(document).ready 都会调用 showViewportSize();并将打印 1 组 10 个视频。接下来，当窗口调整大小时，虽然我的视频是用新的调整大小打印出来的，但它会在第一组之后打印另一组 10 个视频。它不会覆盖从 $(document).ready 生成的视频！任何人都可以帮我解决我应该如何重新编辑它，以便在加载文档时打印视频，并且在调整大小时，视频将动态调整大小，但在调整大小时不会再次打印。

<!DOCTYPE html> 
<html> 

<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery-1.10.1.min.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
</head>


<body>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="videoHolder"></div>
<script  type="text/javascript">

 window.oncontextmenu = function() {
    return false;
  };

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();

    }
  else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }


    xmlhttp.open("GET","amk6.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;


var videoheight = xmlDoc.getElementsByTagName("height");
var videowidth = xmlDoc.getElementsByTagName("width");
var numcameras=xmlDoc.getElementsByTagName("CameraCount");
var vidht =  videoheight[0].childNodes[0].nodeValue ;
var vidwh =  videowidth[0].childNodes[0].nodeValue ;
var numCam = numcameras[0].childNodes[0].nodeValue;
var cameraID = xmlDoc.getElementsByTagName("CameraID");
var title = xmlDoc.getElementsByTagName("title");
var type = xmlDoc.getElementsByTagName("type");
var vidtype = type[0].childNodes[0].nodeValue;
<!-- document.write('<h2>vidheight:</h2>'+ vidht);
<!-- document.write('<h2>vidwidth:</h2>'+ vidwh); -->
<!-- document.write('<h2>numCam:</h2>'+ numCam); -->
 -->
var scrht;
var scrwh;
var rscale;
var numCols;
var numRows;
var numCells;
var boxht;
var boxwh;


$(document).ready(function(e) {
   showViewportSize();
});
$(window).resize(function(e) {
   showViewportSize();
});
function showViewportSize() {
   scrwh = $(window).width();
   scrht = $(window).height();
     rscale = 1.0;
     numCols = Math.floor(scrwh/(rscale*vidwh));
     numRows = Math.floor(scrht/(rscale*vidht));
     numCells = numRows * numCols;
     while((numCells < numCam)&(rscale > 0.1)){
       rscale -= 0.02;
         numCols = Math.floor(scrwh/(rscale*vidwh));
         numRows = Math.floor(scrht/(rscale*vidht));
         numCells = numRows * numCols;
     }
     if (numCells >= numCam)
     {
            boxwh = Math.floor(rscale*vidwh);
            boxht = Math.floor(rscale*vidht);
        }
        else
        {
            boxwh = vidwh;
            boxht = vidht;
        }
for(i=0;i<=cameraID.length;i++) {

    var CamID =  cameraID[i].childNodes[0].nodeValue ;

    $('#videoHolder').append('<video height="' + boxht + '"' + 'width="' + boxwh + '"'  
    + 'title="' + CamID + '"' + 'autoplay loop ><source src="' + CamID + '.'
     + vidtype + '"' + 'type="video/' + vidtype + '"></source></video>');
}


   $('#width').text(scrwh);
   $('#height').text(scrht);
     $('#scale').text(rscale);
     $('#rows').text(numRows);
     $('#cols').text(numCols);
     $('#boxwidth').text(boxwh);
     $('#boxheight').text(boxht);



}


</script>
</body>

【问题讨论】：

标签： jquery html function resize document-ready

【解决方案1】：

是的，你可以。您可以将它绑定到 load 和 resize（或准备）事件，如下所示：

$(window).on('load resize', function () {
// your code
});

希望这会有所帮助。

【讨论】：

【解决方案2】：

只是改变

$(document).ready(function(e) {
   showViewportSize();
});
$(window).resize(function(e) {
   showViewportSize();
});

到

$(document).ready(showViewportSize);
$(window).resize(showViewportSize);

您最初的做法定义了两个独立的匿名函数，它们都调用showViewportSize()。我改成直接调用showViewportSize的方式，将event对象作为第一个参数传入。

【讨论】：

你好兄弟！我试过了，但只要调整大小，视频就会不断打印。例如，当文档加载时，它会打印 1 次视频。当窗口调整大小时，它会再次打印。为什么会这样？？
因为这就是函数的作用。听起来您需要一个加载和打印的功能，以及一个只打印的功能。因此将其重构为 2 个函数：一个仅用于打印，另一个用于加载和调用打印的函数。
是这样的吗？？函数 showVideo() { showViewportSize(); for (var a=0; a'); } } $(document).ready(showVideo); $(window).resize(showVideo);