Максимальный размер стека вызовов превышен при использовании плагина counterUp с путевыми точками jQuery - PullRequest
Новая
       18

Максимальный размер стека вызовов превышен при использовании плагина counterUp с путевыми точками jQuery

0 голосов
/ 27 марта 2019

Я хочу создать счетчики с помощью плагина "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)
...