setTimeout导致Uncaught RangeError: Maximum call stack size exceeded

最新推荐文章于 2024-04-18 18:52:50 发布

原创最新推荐文章于 2024-04-18 18:52:50 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

4 篇文章

订阅专栏

3 篇文章

订阅专栏

本文解决了一个在微信项目中遇到的问题，即苹果手机访问页面时样式排版加载不完整的情况，并分析了Uncaught RangeError: Maximum call stack size exceeded错误的原因，通过调整定时器实现方式最终解决了该问题。

在做微信项目时，苹果手机访问页面经常导致加载不全。

浏览器测试，多次刷新有几率出现错误Uncaught RangeError: Maximum call stack size exceeded。

经排查，错误是出在页面样式排版的定时器重。如下：

var inhad = $(".header").height();
var inhad2 = $(".header-info-line").height();
$(".header-info-line").css("top",inhad);
$("#conindex").css("top", getBannerTop() + inhad2 - 5);
$("#rmyy").css("top", getBannerTop() + inhad2 - 5);

function getBannerTop() {
var tp = $("#imgbanner").height();
if (tp < 5) {
setTimeout(getBannerTop(), 100);
//return;
}
return $("#imgbanner").height();
}

错误原因：1、setTimeout导致了方法的重复执行。

2、引用了zepto.min.js 并不是jquery

将方法修改为js的循环定时器，问题暂时解决

intervalID1 = setInterval(getBannerTop,100);

function getBannerTop() {
   var tp = $("#imgbanner").height();
   if (tp > 5) {
            window.clearInterval(intervalID1);
            var inhad2 = $(".header-info-line").height();
            $("#conindex").css("top", tp+ inhad2 - 5);
            $("#rmyy").css("top", tp + inhad2 - 5);
          }
}