将counterUp插件与jQuery Waypoint一起使用时,超出了最大调用堆栈大小

时间:2019-03-27 13:26:55

标签: jquery jquery-waypoints

我想使用“ counterUp”插件创建计数器。正如您在我的html文件中看到的那样,它将出现在动画圆圈的中间。当我像这样在我的.js文件中单独调用该插件时,它可以完美运行:

$('.counter').counterUp({
    delay: 10,
    time: 1500
});

重点是,我想使用jquery航路点触发计数。所以我确实是这样的:

 $(".counter").waypoint({
        element: this,
        handler:
            function(direction) {
                $(this.element).counterUp({
                    delay: 10,
                    time: 1500
                });
                this.destroy();
            },
        offset: '70%'
});

这是我的html文件:

<svg height="120" width="120">
            <circle class="ring" fill="none" stroke="#eeeeee" stroke-width="8" cx="60" cy="60" r="50"/>
            <circle class="percentage stat" fill="none" stroke="#53ba00" stroke-width="8" cx="60" cy="60" r="50" value="540"/>
            <text class="counter" x="50%" y="50%" font-size="20px" text-anchor="middle" dy=".3em" value="54">54</text>
            Sorry, your browser does not support inline SVG.
        </svg>
        <svg height="120" width="120">
            <circle class="ring" fill="none" stroke="#eeeeee" stroke-width="8" cx="60" cy="60" r="50"/>
            <circle class="percentage stat" fill="none" stroke="#53ba00" stroke-width="8" cx="60" cy="60" r="50" value="45"/>
            <text class="counter" x="50%" y="50%" font-size="20px" text-anchor="middle" dy=".3em" value="78">78</text>
            Sorry, your browser does not support inline SVG.
        </svg>
        <svg height="120" width="120">
            <circle class="ring" fill="none" stroke="#eeeeee" stroke-width="8" cx="60" cy="60" r="50"/>
            <circle class="percentage stat" fill="none" stroke="#53ba00" stroke-width="8" cx="60" cy="60" r="50" value="45"/>
            <text class="counter" x="50%" y="50%" font-size="20px" text-anchor="middle" dy=".3em" value="800">800</text>
            Sorry, your browser does not support inline SVG.
        </svg>

这样做,我遇到以下错误:

jquery.waypoints.js:271 Uncaught RangeError: Maximum call stack size exceeded
at Context.handleScroll (jquery.waypoints.js:271)
at Context.refresh (jquery.waypoints.js:367)
at Context.add (jquery.waypoints.js:216)
at new Waypoint (jquery.waypoints.js:43)
at SVGTextElement.<anonymous> (jquery.waypoints.js:648)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.waypoint (jquery.waypoints.js:641)
at SVGTextElement.<anonymous> (jquery.counterup.js:8)
at Function.each (jquery-3.2.1.min.js:2)

0 个答案:

没有答案