3

我正在尝试使用 javascript/jQuery 来查找窗口的宽度并在以后的函数中使用该变量。

$(function resizer() {

    function doneResizing() {
        var windowWidth = $(window).width();
        return windowWidth;
    }
    var getWidth = doneResizing();


    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });
    doneResizing();


    return getWidth;
});
var finalWidth = resizer()

因此，每当调整窗口大小并windowWidth自动更新时，resize 函数都会更新。当变量在函数之外返回时，getWidth除非我刷新页面，否则不会随着窗口大小调整而更新。有任何想法吗？两周前我刚拿起 js/jq，我正在尽我最大的努力来解决退货和关闭问题，所以我可能在这里忽略了一些东西。谢谢。

4

2 回答 2

2

你把你的resizer函数和 jQueryready函数混在一起了。要跟踪窗口宽度，您可以执行

(function ($) {
    var windowWidth;
    // when the document is fully loaded
    $(function(){
        // add an resize-event listener to the window
        $(window).resize(function(){
            // that updates the variable windowWidth
            windowWidth = $(window).width();
        })
        // trigger a resize to initialize windowWidth
        .trigger('resize');

        // use windowWidth here.
        // will be updated on window resize.
    });

}(jQuery));
于 2013-09-19T09:20:23.333 回答
2

执行以下操作会简单得多：

var finalWidth;

$( document ).ready(function() {
      //Set this the first time
      finalWidth = $(window).width();       

      $(window).resize(function() {
      //resize just happened, pixels changed
       finalWidth = $(window).width();

        alert(finalWidth); //and whatever else you want to do
        anotherFunction(finalWidth); 
    });
 });

并在外部使用 finalwidth，因为它是一个全局变量。您可以在没有复杂性的情况下获得相同的功能。

更新

正如所评论的，全局变量是不好的做法（例如http://dev.opera.com/articles/view/javascript-best-practices/）。

为避免全局变量finalWidth可以移动到内部，并且可以从内部事件处理程序document.ready调用任何必要的函数。resize(function() {

更新 2

由于拖动导致多个调整大小事件的问题，代码已更新。

参考：JQuery：如何仅在完成调整大小后才调用 RESIZE 事件？

JSFiddle：http: //jsfiddle.net/8ATyz/1/

$( document ).ready(function() {
      var resizeTimeout;

      $(window).resize(function() {
        clearTimeout(resizeTimeout);
        resizeTimeout= setTimeout(doneResizing, 500);      
     });

      doneResizing(); //trigger resize handling code for initialization 
 });


function doneResizing()
{
    //resize just happened, pixels changed
    finalWidth = $(window).width();

    alert(finalWidth); //and whatever else you want to do
    anotherFunction(finalWidth);    

}

function anotherFunction(finalWidth)
{
    alert("This is anotherFunction:"+finalWidth);   
}
于 2013-09-19T09:21:52.340 回答