Javascript 或 JQuery 需要重新加载页面，为什么？答案

【问题标题】：Javascript or JQuery need page reload, Why?Javascript 或 JQuery 需要重新加载页面，为什么？
【发布时间】：2015-10-29 10:36:44
【问题描述】：

为什么 Javascript 或 jQuery 在应用某些效果之前需要重新加载页面？

CSS 是实时更新的

例子：

这是实时工作的

@media all and (max-width:767px) {
.nav-menu {
 margin:0px!important;
 }
 }

这需要重新加载页面才能看到效果，不要实时更新resize window

if ($(window).width() > 980) {
do something
};

为什么？

【问题讨论】：

【解决方案1】：

因为后者是 JavaScript。目前，它是一个例程，仅在解析脚本标记时触发一次。您可以将其包装在一个函数中并多次触发它。例如在窗口调整大小事件上。前者是CSS，浏览器根据CSS规则不断更新页面。

window.addEventListener("resize", function(){
     if ($(window).width() > 980) {
         do something
     };
}, false);

或者在 jQuery 中：

$(window).on("resize", function(){
     if ($(window).width() > 980) {
         do something
     };
});

现在每次调整窗口大小时都会触发。

【讨论】：

【解决方案2】：

这是因为 jQuery/Javascript 是在加载时完成的，而不是在您调整窗口大小时完成的。理论上，CSS 也是在加载时完成的，并且只知道何时显示什么。

如果你想在调整窗口大小时运行 JS/jQuery，你必须添加如下内容：

window.onresize = resize;

function resize()
{
  if ($(window).width() > 980) {
     //do something
  };
}

上述代码将在您每次调整窗口大小时运行，因此每次运行时都会检查窗口是否大于 980。

【讨论】：

你也想出了同样的答案。我个人更喜欢建议人们使用addEventListener。覆盖 window.onresize 可能会导致（编写错误的）库/第三方脚本出现问题。

【解决方案3】：

这将在resize 事件被触发时起作用

  $( window ).resize(function() {
     if ($(window).width() > 980) {
       ... 
        .....
        ....
    }
 });

这会起作用

ref - resize() jquery 中的函数

【讨论】：

【解决方案4】：

您必须触发一个事件以使 javascript 在不加载页面的情况下检查该条件

window.onresize = function(event) {
    // add your if condition here
};

对于 jquery 只需使用下面的

$(window).resize(function() {
    // add you if condition here
});

【讨论】：

【解决方案5】：

$(window).width()

当你调用这样的函数时，它会在执行时给你一个返回值。如果你想在调整大小、点击文档等时给出一个值，你必须添加一个事件监听器。

$(window).on('resize', function() {

    console.log( $(window).width() )

});

【讨论】：