Question

我一直试过，但是当在页面上向上或向下滑动时，window.onresize仍然会闪现。

首先，我尝试一个基本的命令行：

window.onresize = function (event) {
  setTimeout(Orientation,500);
}

function Orientation() {
 if (window.innerHeight > window.innerWidth) {
   alert("Portrait");
  }
else {
   alert("Landscape");
  }
}

当警报显示时，我单击确定。但是当我在页面上向上或向下滑动时，警报再次出现，总是这样......

我会尝试jquery的David Walsh：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var myEfficientFn = debounce(function() {
    if (window.innerHeight > window.innerWidth) {
   alert("Portrait");
  }
else {
   alert("Landscape");
  }
}, 250);

window.addEventListener('resize', myEfficientFn);

结果是一样的！

您可以通过手机或平板电脑尝试：http://hangaumy.com/test.html

此活动还有其他方法吗？非常感谢！

Answer 1

在您的函数中添加一个条件，以便您的函数仅在您需要时触发。

＆＃13;

window.onresize = doSomething;
var count=0
function doSomething(x) {
if(count<1){
    alert('Go' + x);
    }
    count+=1;
}

＆＃13;

Answer 2

在这种情况下，我无法找到使用事件调整大小的方法，但我找到了另一种解决方案：

var orien = '';
setInterval(function() {
  if (window.innerHeight >= window.innerWidth && orien != 'Portrait') {
    alert('Portrait');
    orien = 'Portrait';
    return;
  }
  if (window.innerHeight < window.innerWidth && orien != 'Landscape') {
    alert('Landscape');
    orien = 'Landscape';
  }
}, 500);

滚动时如何停止window.onresize事件？我只需要开火一次？

2 个答案: