0

我正在构建这个程序，其中内容根据窗口宽度加载。在页面加载时，它可以正常运行，并附有正确的 HTML 和 CSS。但是当我调整页面大小时，我的 ajax 调用太多来加载适当的工作表，导致内容令人讨厌地闪烁。JQuery 似乎有一万个答案，但原生 Javascript 却没有。我已经从关于 SO 的许多问题和答案中推断出，需要超时才能在 resize 函数的 COMPLETION 上获得一个值。但是..无济于事。即使超时，它仍然会快速调用 AJAX。这是我到目前为止所做的。

function layoutHandler(){   
    if(window.innerWidth <= 400){
            // AJAX call
       } else if(window.innerWidth >= 401 && window.innerWidth <= 770){
            // AJAX call
       } else if(window.innerWidth >= 771 && window.innerWidth <= 1150){
            // AJAX call
    }else if(window.innerWidth >= 1150){
           // AJAX call
    }
}
window.onresize = layoutHandler;
layoutHandler();

这在页面加载时效果很好。正确的脚本就位。但是当我在 console.log 中调整浏览器的大小时，它会进行大量调用，从而使页面剧烈闪烁。根据 JQuery 解决方案，我尝试了几种方法从window.onresize. 仍然我无法获得单个值，但持续调用。
从我读到的内容来看，我所尝试的是注释掉 window.onresize = layoutHandler;并移至layoutHandler();BODY 的底部。然后尝试了这个...

    var resize1 = window.innerWidth;
    console.log(resize1);   
    function myFunction() {
       setTimeout(function(){
          cnt();
       }, 1000);    
    }   
    window.addEventListener("resize", myFunction);
    function cnt(){
    var resize2 = window.innerWidth;    
        if(resize1 != resize2){
            console.log('no match');
            //layoutHandler(); << this is where it makes repeated calls to the function
        }
    }
console.log(resize2);

即使超时，它仍然会通过调用函数对每个像素增加做出反应。除了闪烁所有呼叫的页面外，这很完美。如果我能得到一个 SINGLE 值，在调整大小事件之后，我的问题就会得到解决。寻找原生 Javascript 解决方案/建议。
提前 TY。

4

1 回答 1

2

尝试这个

var size = null;
function layoutHandler(){ 
            if(window.innerWidth <= 400){
                    if(size != "small"){
                       // AJAX call
                    }
                    size = "small"
               } else if(window.innerWidth >= 401 && window.innerWidth <= 770){
                    if(size != "medium"){
                       // AJAX call
                    }
                    size = "medium"
               } else if(window.innerWidth >= 771 && window.innerWidth <= 1150){
                    if(size != "large"){
                       // AJAX call
                    }
                    size = "large"
            }else if(window.innerWidth >= 1150){
                   if(size != "extraLarage"){
                       // AJAX call
                    }
                    size = "extraLarage"
            }
        }
window.onresize = layoutHandler;
layoutHandler();
于 2016-03-08T10:10:28.063 回答