只有在电脑微信内置浏览器下的BUG：resize > setTimeout，无限刷新页面

其他浏览器都是正常的，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)

    })
})
运行结果及报错内容

其他浏览器和手机微信打开都正常，都是只有窗口改变才会触发一次，
下面是唯一特殊的电脑微信打开的动图效果

img

我的解答思路和尝试过的方法
  • 看过说不支持ES6的帖子，也已经从 let 换成 var 了，无效
  • setInterval ，试过同样无效

这是链接，可以做测试，其他浏览器都是正常的，只有电脑端的微信里点开会出现这个问题
不是个例，公司电脑、家里电脑，也叫朋友帮忙打开看了，电脑微信打开都是无限刷新
https://notes.97design.fun/test/

我想要达到的结果
  • 保留这个功能（窗口改变刷新一次）的前提下
  • 解决在电脑端微信点开，无限刷新的BUG
  • 请教有关行业精英，望不吝赐教

好像电脑端微信的bug。。dom ready或者window onload中绑定resize会马上触发。垃圾。。延时绑定resize就没问题了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2></h2>
    <script>
        window.addEventListener('load', function () {
            document.querySelector('h2').innerHTML += ('load' + new Date())+'<br>';
            var mytimer
            setTimeout(function () {///////在window onload事件中再延时绑定resize事件就不会触发了
                document.querySelector('h2').innerHTML += ('bind' + new Date()) + '<br>';
                window.addEventListener('resize', function () {
                   clearTimeout(mytimer);
                    mytimer = setTimeout(function () {
                         window.location.reload();
                        document.querySelector('h2').innerHTML += ('一闪一闪' + new Date()) + '<br>';
                    }, 500)
                })
            }, 1000);
        });
    </script>
</body>
</html>

不需要整个页面刷新，只要刷新H2就可以了。

这是用到这个功能的页面，窗口改变，样式跟着改变，几乎所有涉及大小，字号，宽高，距离的样式都是根据窗口改变后，屏幕的大小去动态调整的，所有我能想到的方法就是刷新一下页面

img

总结

  • 经测试，电脑微信内置浏览器打开网页时，window.resize事件、window.onload下的window.resize事件、都会自动执行
  • 解决方法：通过 setTimeout 延时 0.1秒 绑定，就能解决

代码如下

  • 会引发 电脑微信 打开网页 bug 的代码
    // 直接写、写在：window.onload=function(){ *** }、写在：$(function(){ *** })，都会自动执行
let timer = null;
$(window).resize(function () {
  clearTimeout(timer);
  timer = setTimeout(function () {
      window.location.reload();
  }, 500)
})
  • 解决问题的代码
    setTimeout(function () {
  var timer = null;
  $(window).resize(function () {
      clearTimeout(timer);
      timer = setTimeout(function () {
          window.location.reload();
      }, 500)
  })
}, 100)