连续放大图表后，JSFiddle变得无响应

Question

当我们连续8或10次放大图表时，JSFiddle变得没有响应。

JSFiddle

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript + jQuery 1.7.2

$(function () {

    /**
     * Experimental Highcharts plugin to implement chart.alignThreshold option. This primary axis
     * will be computed first, then all following axes will be aligned to the threshold.
     * Author: Torstein Hønsi
     * Last revision: 2015-05-18
     */
(function (H) {
    var Axis = H.Axis,
        inArray = H.inArray,
        wrap = H.wrap;


    wrap(Axis.prototype, 'adjustTickAmount', function (proceed) {
        var chart = this.chart,
            primaryAxis,
            primaryThreshold,
            primaryIndex,
            index,
            newTickPosLow,
            threshold,
            newTickPositionsHigh,
            max,
            nextStep;

        // Find the index and return boolean result
        function isAligned(axis) {
            index = inArray(threshold, axis.tickPositions); // used in while-loop
            return axis.tickPositions.length === axis.tickAmount && index === primaryIndex;
        }


        for(var i = chart[this.coll].length - 1; i >= 0; i--){

            chart[this.coll][i].removePlotLine('zero-point-plotline');

            if(chart[this.coll][i].hasVisibleSeries){
                primaryAxis = chart[this.coll][i];
            }
        }

        primaryThreshold = (primaryAxis.series[0] && primaryAxis.series[0].options.threshold) || 0;

        threshold = 0;
        for(var i = 0; i < this.series.length; i++){
            if(this.series[i].visible){
                threshold = this.series[i].options.threshold;
                break;
            }
        }

        primaryIndex = primaryAxis.tickPositions && inArray(primaryThreshold, primaryAxis.tickPositions);

        if(primaryIndex > 0 && primaryIndex < primaryAxis.tickPositions.length - 1){
            primaryAxis.addPlotLine({
                color: 'black',
                value: 0,
                width: 0,
                id: 'zero-point-plotline',
                zIndex: 3
            })
        }

        if (chart.options.chart.alignThresholds && primaryAxis && this !== primaryAxis && this.hasVisibleSeries) {

            if (this.tickPositions && primaryIndex >= 0 && primaryIndex <= primaryAxis.tickPositions.length - 1) {

                if (this.tickAmount) {

                    while (!isAligned(this)) {

                        if (index < primaryIndex) {

                            // fill up the tick positions, so that we can calculate the new interval-steps
                            while (this.tickPositions.length < primaryAxis.tickPositions.length) {
                                var nextStep = Math.abs(Math.abs(this.tickPositions[this.tickPositions.length - 1]) - Math.abs(this.tickPositions[this.tickPositions.length - 2]));
                                this.tickPositions.push(this.tickPositions[this.tickPositions.length - 1] + nextStep);
                            }


                            newTickPositionsHigh = [];
                            for(var i = 0; i < primaryAxis.tickPositions.length; i++){
                                max = this.tickPositions[this.tickPositions.length - 1];
                                nextStep = max / (primaryAxis.tickPositions.length - 1 - primaryIndex);
                                newTickPositionsHigh.push(max - i * nextStep);
                            }

                            this.tickPositions = newTickPositionsHigh.reverse();
                            this.max = this.tickPositions[this.tickPositions.length - 1];
                            this.min = this.tickPositions[0];
                        } else {
                            newTickPosLow = this.tickPositions[this.tickPositions.length - 1] + this.tickInterval;
                            this.tickPositions.push(newTickPosLow);
                            this.max = newTickPosLow;
                        }
                        proceed.call(this);
                    }
                }
            }

        } else {
            proceed.call(this);
        }
    });
}(Highcharts));

    $('#container').highcharts({
        chart: {
            alignThresholds: true,
            type: 'area',
            zoomType:'xy'
        },
        title: {
            text: 'The <em>alignThreshold</em> option is true'
        },
        xAxis: {
            categories: ['Flags(1)','Flags(2)','Flags(3)','Shopping (4)','Shopping(5)','Shopping(6)','Shopping(7)','Town(8)','Town(9)','Town(10)','Town(11)','Town(12)','Town(14)','Town(15)','Town(16)','Town(17)','Small(18)','Small(19)','Small(20)','Town(13)'],
            scrollbar:
            {
            enabled:true
            }
        },
        yAxis: [{
        title: {
            text: 'Traffic',

        },

    }, {
        title: {
            text: 'Conversion Rate'
        },

        opposite: true
    },
        {
        title: {
            text: 'ATV'
        },

        opposite: true
    },
        {
        title: {
            text: 'TotalTransaction'
        },

        opposite: true
    },
    {
        title: {
            text: 'Sta'
        },

        opposite: true
    }],
        series: [{
            data: [8.16,7.6,2.86,2.02,-1.98,-2.83,4.53,-63.35,0],
            type: 'spline',
            yAxis: 0
        }, {
            data: [0.9,0.4,-0.4,-2.2,-0.3,0.0,-0.5,1.1,-0.4,3.4,0.8,1.4,2.4,-1.2,3.2,1.7,-0.5,-0.3,2.3,2.8],
            type: 'column',
            yAxis: 1,
            visible: false
        }, {
            data: [-6.44,6.56,-9.94,35.70,58.07,0.00,103.36,91.03,-84.11,-41.35,25.15,-6.32,4.66,2.93,59.47,-6.39,22.44,17.30,46.46,-14.18],
            type: 'column',
            yAxis: 2,
            visible: false
        }]
    });
});