Javascript 如何使用jQuery检测超过某一点的浏览器屏幕宽度增加？

基本上，如果用户将浏览器的大小从X增加到Y，我想做的是触发一个事件。前提是X=小于750像素的任何值，Y是大于750像素的任何值

现在，我正在做这样的事情：

$(window).resize(function(){
    if ($(window).width() >= 750) {
        console.log('750 or more');
    }
});

然而，这显然是无效的。例如，如果我将窗口的大小从780px调整到最大宽度（1024px），即使这样，事件也会被触发。或者，即使我将大小从800px减小到780px，我仍然可以得到控制台输出

---

如何使其正常工作？

您需要设置超时时间才能进行检查

示例：

var resizeTimer;

$(window).resize(function() {


 clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    var body_size = $(window).width();

    // ...
    // do your screen check here
    // ...


  }, 1);

})

---

希望这对您有所帮助，您需要设置超时才能进行检查

示例：

var resizeTimer;

$(window).resize(function() {


 clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    var body_size = $(window).width();

    // ...
    // do your screen check here
    // ...


  }, 1);

})

---

希望这有帮助

对于这个问题没有真正的解决方案，因为在达到最大宽度后删除on resize事件会导致on resize函数不再被调用，即使宽度低于1024px

也许在将来，只有在某些条件下才可能有一个on resize事件

您还可以使用on resize end事件仅在调整窗口大小后触发函数，请记住，这可能会导致在用户调整窗口大小后而不是在调整窗口大小期间发生视觉变化

---

有多种方法可以使调整大小事件执行得更好：

此问题没有真正的解决方案，因为在达到最大宽度后删除调整大小事件会导致即使宽度低于1024px，也不再调用调整大小功能

也许在将来，只有在某些条件下才可能有一个on resize事件

您还可以使用on resize end事件仅在调整窗口大小后触发函数，请记住，这可能会导致在用户调整窗口大小后而不是在调整窗口大小期间发生视觉变化

---

有多种方法可以使调整大小事件执行得更好：

下面是一个使用脚本的限制版本，这可能是一个好的开始

（函数（超时，更大）{//本地静态变量-超时，更大
window.addEventListener（“调整大小”，函数（e）{
如果（！超时）{
timeout=setTimeout（函数（）{
超时=空；
实际需求处理程序（e）；
//设置实际火灾率
}, 66);
}
}，假）；
函数actualResizeHandler（e）{
//处理调整大小事件
如果（window.innerWidth>=750&！更大）{
//超过（或等于）750
document.querySelector（'span'）.style.color='blue'；
document.body.innerHTML+='
大于750'；
}else if（window.innerWidth<750&更大）{
//低于750
document.querySelector（'span'）.style.color='red'；
document.body.innerHTML+='
低于750'；
}
较大=（window.innerWidth>=750）；
}
//负载运行一次
较大=（window.innerWidth<750）；
actualResizeHandler（）；
}（空，假））
此文本大的是蓝色，小的是红色
这是一个使用脚本的限制版本，这可能是一个好的开始



（函数（超时，更大）{//本地静态变量-超时，更大
window.addEventListener（“调整大小”，函数（e）{
如果（！超时）{
timeout=setTimeout（函数（）{
超时=空；
实际需求处理程序（e）；
//设置实际火灾率
}, 66);
}
}，假）；
函数actualResizeHandler（e）{
//处理调整大小事件
如果（window.innerWidth>=750&！更大）{
//超过（或等于）750
document.querySelector（'span'）.style.color='blue'；
document.body.innerHTML+='
大于750'；
}else if（window.innerWidth<750&更大）{
//低于750
document.querySelector（'span'）.style.color='red'；
document.body.innerHTML+='
低于750'；
}
较大=（window.innerWidth>=750）；
}
//负载运行一次
较大=（window.innerWidth<750）；
actualResizeHandler（）；
}（空，假））
此文本在大屏幕上为蓝色，在小屏幕上为红色
这取决于调整浏览器窗口大小时要执行的操作，您可能希望查看如何使用CSS媒体查询。这里不存在这些问题，因为我希望在大小更改时更改DOM元素的属性。在这种情况下，您的代码是唯一的选项。不过，我建议您查看事件处理程序的去Bouncing，因为它会为屏幕宽度更新的每个像素触发一次。您到底想做什么？我正在尝试从头构建一个响应导航栏。这取决于调整浏览器窗口大小时您想做的操作，您可能想看看如何使用CSS媒体查询。这里没有这些问题，因为我想在大小改变时更改DOM元素的属性。在这种情况下，您的代码是唯一的选项。不过，我建议您查看事件处理程序的去抖动，因为它会为屏幕宽度更新的每个像素触发一次。您到底想做什么？我正在尝试从头构建一个响应导航条。