蔡宏基 2021-12-16 21:07 采纳率: 100%
浏览 76
已结题

只有在电脑微信内置浏览器下的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
  • 请教有关行业精英,望不吝赐教
  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2021-12-16 22:17
    关注

    好像电脑端微信的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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 12月24日
  • 已采纳回答 12月16日
  • 修改了问题 12月16日
  • 修改了问题 12月16日
  • 展开全部

悬赏问题

  • ¥170 如图所示配置eNSP
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥15 键盘指令混乱情况下的启动盘系统重装