调整窗口大小时如何激活答案

【问题标题】：How to active when resize window调整窗口大小时如何激活
【发布时间】：2018-12-13 15:44:03
【问题描述】：

当我的窗口缩小到一定大小时，我想激活一些功能。

STANDARD_SIZE = 1760;
window.addEventListener('resize', function(event){
    if(window.innerWidth < STANDARD_SIZE ){
        $.post('/a', {size:'mobile'}, function(res){
            document.open();
            document.write(res);
            document.close();
        })}
    else{
        $.post('/a', {size:'window'}, function(res){
            document.open();
            document.write(res);
            document.close();
        })}});

以上是我的代码。问题是当我调整窗口大小时，我需要此代码激活最后一个大小，而不是第一个大小。

例如，我为每个 if 和 else 编码了 alert('mobile') 和 alert('window')。当我将宽度调整为低于 1760 时，它会提示 window 3 次，然后提示 mobile。

所以我需要最后一个“手机”来第一次发出警报，而不是最后一次。有什么想法吗？

还有比上面的代码更简单的代码吗？

我一直在尝试我的代码，当我将大小调整到 1760 以上时，上面的代码确实有效。但是当我尝试将大小调整到 1760 以下时，它不起作用。

（已解决）上面的代码确实有效。我一直想知道为什么它适用于window，但不适用于mobile 大小。所以我检查了服务器代码（python）。这只是单词拼写错误。感谢下面的其他答案！由于上面有已知代码错误，我将留给其他需要调整大小功能的帮助。

【问题讨论】：

当您从1800 转到1760 时，将调用窗口调整大小，并且它必须根据您的条件是窗口警报。

标签： javascript html

【解决方案1】：

由于没有“调整大小完成”事件，您可以设置超时，这样您的代码将不会运行，除非自上次调整大小事件以来经过了足够的时间。

STANDARD_SIZE = 1760;
var resizeTimer;
window.addEventListener('resize', function(event) {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (window.innerWidth < STANDARD_SIZE) {
      alert("mobile");
      /*
      $.post('/a', {
        size: 'mobile'
      }, function(res) {
        document.open();
        document.write(res);
        document.close();
      })
      */
    } else {
      alert("window");
      /*
      $.post('/a', {
        size: 'window'
      }, function(res) {
        document.open();
        document.write(res);
        document.close();
      })
      */
    }
  }, 250);

});

【讨论】：

【解决方案2】：

您可以限制多次通话

STANDARD_SIZE = 1760;
var DEVICE = 'window';
window.addEventListener('resize', function(event){
    if(window.innerWidth < STANDARD_SIZE && DEVICE != 'mobile' ){
        DEVICE = 'mobile';
        $.post('/a', {size:'mobile'}, function(res){
            document.open();
            document.write(res);
            document.close();
        })}
    else if(DEVICE != 'window'){
        DEVICE = 'window';
        $.post('/a', {size:'window'}, function(res){
            document.open();
            document.write(res);
            document.close();
        })}});

【讨论】：

【解决方案3】：

我认为您不需要添加新的事件侦听器来调整大小。只需做如下示例： <body onresize="resizeHandler()"> 然后定义你的resizeHandler() 函数：

var STANDARD_SIZE = 1760;
var isWindow = true;
function resizeHandler() {
   if (window.innerWidth < STANDARD_SIZE && isWindow) {
       isWindow = false;
       alert('Mobile');
   } else if (!isWindow) {
       isWindow = true;
       alert('Window');
   }
}

上面的函数处理程序只是处理你的问题的一个技巧。

【讨论】：