动态javascript函数[重复]答案

【问题标题】：Dynamic javascript function [duplicate]动态javascript函数[重复]
【发布时间】：2014-05-17 23:25:10
【问题描述】：

我有一个 javascript 函数，只有当浏览器屏幕大于 1024 像素时，我才想执行该函数。

if ($(window).width() > 1024) {

此代码的问题在于，如果用户首先在浏览器屏幕中加载网页 800 像素，然后将浏览器屏幕重新缩放到 1024（或更多），则不会执行该功能。为了执行，需要刷新屏幕。

你有什么建议可以解决吗？

【问题讨论】：

使用窗口resize事件。见api.jquery.com/resize
以 jQuery 方式回答，因为您已经使用 jQuery。通常我不会，因为它只标记了 JavaScript。但无论如何......你想要它标记为 javascript 或 javascript + jQuery 吗？如果您追求纯 javascript 解决方案，我将删除答案。

标签： javascript jquery html

【解决方案1】：

我会像这样使用原生 JS：

window.onresize=function(){
  if(window.innerWidth > 1024){
    alert('GT 1024');
    // Your function here
  }
};

width属性是innerWidth (http://www.w3schools.com/jsref/prop_win_innerheight.asp)，resize函数是(http://www.w3schools.com/jsref/event_onresize.asp)

不清楚您想要做什么，但如果您要更改显示的 CSS 规则，最好使用 CSS 媒体查询 (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)

【讨论】：

【解决方案2】：

jQuery resize

$(document).ready(function() {
    if ($(window).width() > 1024) {
        my_awesome_window_above1024_function();
    }
});
$(window).resize(function() {
    if ($(window).width() > 1024) {
        my_awesome_window_above1024_function();
    }
});

【讨论】：

投反对票是因为？
效果很好，非常感谢。
@user3066588：不客气。
但是现在的问题是它不能在“文档准备就绪”上工作——我的意思是当我加载页面时我需要在函数执行之前调整它的大小例如如果我的浏览器屏幕是1050px 在我调整屏幕大小之前该功能不起作用。
@user3066588：像那样？

【解决方案3】：

只需设置 window.resize 事件，该事件将在加载时和任何调整大小时至少调用一次，并使用一个标志来确保它不会多次执行。

(function(){
   var executed = false;
   $(window).resize(function(){
      if(executed) return;
      if($(window).width()>1024){
         executed = true;
         executeSomeFunc();
      }
   });
})();

【讨论】：

效果很好，非常感谢。

【解决方案4】：

用途：

  $( window ).resize(function() {
    if ($(window).width() > 1024) {

         // Your code.
    }
 }

【讨论】：

有人愿意解释否决票吗？
效果很好，非常感谢。
@user3066588 欢迎。很高兴能帮上忙。