从窗口滚动事件中调用窗口大小调整事件的函数?

时间:2015-03-16 17:33:24

标签: javascript

我有一个名为size的变量和一个依赖于它的函数。由于变量取决于屏幕宽度,如果宽度变化需要更改,我需要在窗口调整大小事件中使用它。但是我也希望通过滚动事件等其他事件来调用它。

$(window).resize(function (){

    if ($(window).width() > 1200) {
        var size = "large";
    }
    else {
        var size = "small";
    }

    function showRow(param) {
        if (size == "large") {
            $(".result.hidden").slice(0, 3).removeClass('hidden').each(someFunction);
        }
        else if (size == "small") {
            $(".result.hidden").slice(0, 2).removeClass('hidden').each(someFunction);
        }
    }

});

$(window).scroll(function () {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
    showRow();
  }
});

1 个答案:

答案 0 :(得分:0)

你可以这样做,showRow是一个全局变量,并且会在其中计算窗口大小,因此你可以在调整大小和滚动内部调用它。这假设您还希望在调整大小内部使用showRow。如果您在调整大小内没有任何其他代码,那么您可以在第一个示例中完全删除它

var showRow = function() {
    if ($(window).width() > 1200) {
        var size = "large";
    }
    else {
        var size = "small";
    }

    if (size == "large") {
        $(".result.hidden").slice(0, 3).removeClass('hidden').each(someFunction);
    }
    else if (size == "small") {
        $(".result.hidden").slice(0, 2).removeClass('hidden').each(someFunction);
    }
}

$(window).resize(function (){
    showRow();
    // other code
});

$(window).scroll(function () {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
    showRow();
  }
});

如果您不想在调整大小内使用showRow

// initialize windowSize
var windowSize = $(window).width() > 1200 ? "large" : "small";

var showRow = function () {
    if (windowSize == "large") {
        $(".result.hidden").slice(0, 3).removeClass('hidden').each(someFunction);
    } else if (windowSize == "small") {
        $(".result.hidden").slice(0, 2).removeClass('hidden').each(someFunction);
    }
}

$(window).resize(function () {
    if ($(window).width() > 1200) {
        windowSize = "large";
    } else {
        windowSize = "small";
    }
    // other code
});

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
        showRow();
    }
});