移动设备上滚动时会执行$(window).resize()函数

Question

例如：

HTML

<div><p>A lot of text that goes off the page so you have to scroll down.........</p></div>

JavaScript

$(window).resize(function(){
    $("div").append("<p>appended</p>");
});

这个代码可以在调整窗口大小时按预期附加段落，但当我向下滚动时它也会被附加。这意味着当我到达原始文本的末尾时，大约会有20个附加段落。

这仅发生在移动设备上（迄今为止我已经检查了Chrome、Safari和Firefox），而不是桌面浏览器。

有没有办法阻止这种情况发生，并在窗口（您看到的）调整大小时仅将段落附加？ 或者只让调整大小内部的代码每隔一段时间执行一次？

谢谢。

- cCe.jbc

---

你确定这是在滚动时发生的吗？我这边没有出现这种情况。Fiddle - putvande

也许你有另一个滚动事件监听器，它会手动触发调整大小事件！ - Khorshed Alam

在滚动时不会添加任何 p 标记。如果您还添加了其他内容，请将剩余的代码发布出来。 - frnt

抱歉，我忘了提到这只发生在移动设备上@putvande。帖子已编辑。 - cCe.jbc

@frnt 这只是一个示例，所以这是我正在使用的唯一代码。请参见我上面的评论。 - cCe.jbc

@KhorshedAlam 在问题中除了"is"之外没有其他内容。 - cCe.jbc

Answer 1

移动设备存在的问题是当你滚动时，浏览器工具栏会隐藏，这会导致屏幕改变（触发调整大小事件），这意味着你需要对代码进行一些验证，并检测为什么调整大小事件被触发。

我使用的一种方法是保存窗口宽度并检查正确的窗口宽度是否相同或已更改。如果它发生了变化，那么就意味着附加应该发生（在您的情况下）。

var dwidth = $(window).width();

$(window).resize(function(){
    var wwidth = $(window).width();
    if(dwidth!==wwidth){
         dwidth = $(window).width();
         console.log('Width changed');
    }
});

- Zenel Rrushi