javascript - 在javascript中刷新页面时阻止变量的更改值

Question

我有 2 个变量名称 first 和 last。当窗口大小小于 768px 时，我希望 first = 1 和 last = 5。当窗口大小大于 768px 时，first = 1 和 last = 3。这是我的代码。

var first = 1;
var last = 5;
window.onresize = function(){
    var w = window.innerWidth 
            || document.documentElement.clientWidth 
            || document.getElementsByTagName('body')[0].clientWidth;

    if (w <= 768){
        first = 1;
        last = 3;
    }

    if (w > 768){
        first = 1;
        last = 5;
    }
} 

成功了。但是当窗口大小为 600px(小于 768px)时，我按 F5(刷新)，第一个变量 = 1，最后一个 = 5(这些值已更改)。我想当我按F5时，如果窗口小于768px，它仍然是1和3。我现在该怎么办？帮我。谢谢。

Answer 1

本应如此

现在，我们有一个函数可以根据窗口的宽度设置变量。 我们将调用它两次

1. 当页面加载时，您应该根据窗口大小设置变量(First，Last)

2. 调整页面大小时，您应该再次设置变量。

   var first = 1;
   var last = 5;
   
   function setVariables()
   {
   var w = window.innerWidth 
           || document.documentElement.clientWidth 
           || document.getElementsByTagName('body')[0].clientWidth;
   
   if (w <= 768){
       first = 1;
       last = 3;
   }
   
   if (w > 768){
       first = 1;
       last = 5;
   }
   }
   
   window.onresize = function(){
   setVariables();
   } 
   
   setVariables();