其他浏览器都是正常的,Chrome、Firefox、Edge、从手机点开也正常,独独电脑端出BUG
问题相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2></h2>
<!-- 这里是引用了jQuery库的 -->
<script src="jquery.min.js"></script>
<!-- 由于电脑微信的缓存,没办法轻松手动清理,
所以在每次更新js,手动更新版本号 ?xxxx ,达到避免缓存的效果 -->
<script src="javaScript.js?v10000"></script>
</body>
</html>
// 这是 javaScript.js 这个文件
// 这么做的原因是,写了一些根据页面窗口大小动态调整的css样式
// 每次窗口大小改变时,都得手动刷新一次样式才能正常,于是有了这个根据窗口变化自动刷新的方法
$(function(){
// 定义定时器 timer
var timer = null;
// 当浏览器窗口大小发生改变
$(window).resize(function(){
// 1. 清除定时器 timer,先清再开
clearTimeout(timer);
// 2. 开启一次性定时器 timer
timer = setTimeout(function (){
// 2.1 刷新页面,刷新一次是需要保留的功能,这是刚需
window.location.reload();
// 2.2 做个显示,待会录 bug 动图的时候更明显
$('h2').text('一闪一闪'); // 这不是需求,只是为了录动图看效果,需求是刷新一次
// 定时器,半秒后执行的原因是:
// 当窗口调整,每1像素的改变都会触发一次刷新,可能随便一拉就触发几十次,然后就故障了
// 设置半秒的定时器,可以在半秒内的下一次触发,清除上一次,重新计时,最后只触发最后一次的操作
},500)
})
})
运行结果及报错内容
其他浏览器和手机微信打开都正常,都是只有窗口改变才会触发一次,
下面是唯一特殊的电脑微信
打开的动图效果
我的解答思路和尝试过的方法
- 看过说不支持ES6的帖子,也已经从 let 换成 var 了,无效
- setInterval ,试过同样无效
这是链接,可以做测试,其他浏览器都是正常的,只有电脑端的微信里点开会出现这个问题
不是个例,公司电脑、家里电脑,也叫朋友帮忙打开看了,电脑微信打开都是无限刷新
https://notes.97design.fun/test/
我想要达到的结果
- 保留这个功能(窗口改变刷新一次)的前提下
- 解决在电脑端微信点开,无限刷新的BUG
- 请教有关行业精英,望不吝赐教