Question

我正在尝试使用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，我正尽力将我的头围绕回来和关闭，所以我可能在这里忽略了一些东西。感谢。

Answer 1

您已将resizer函数与jQuery ready函数混淆。要跟踪窗口宽度，您可以

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

Answer 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: How to call RESIZE event only once it's FINISHED resizing?

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

从函数返回更新变量

2 个答案:

更新

更新2