当我更改angular.js中的视图时如何防止图表发生错误

Question

I have two views. view A and view B. in the view This is my chart. When I go from view A to view BI quickly get an error. I suppose this error is received because there is a settimeout and when the view is changed the function is not finished yet. How can I avoid having this error?

/* myApp module */
var myApp = angular.module('myApp', ['ui.router'])
.config(function ($stateProvider) {

    $stateProvider.state('A', {
        url: "/A",
        template: '<div id="chart"></div><a ui-sref="B">NEXT</a>',
        controller: function ($scope) {
        var chartSensorial = c3.generate({
          bindto: '#chart',
            data: {
                columns: [
                    ['&nbsp;', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                ],
                type: 'bar',
                labels:true
            },
            axis: {
                rotated: true,
                x: {
                    type: 'category',
                    categories: ['α A.N', 'NUC', 'LYS', 'PHE', 'LEU', 'ILE', 'CYS', 'MET', 'VAL', 'TYR', 'PRO', 'ALA', 'THR', 'ARG', 'HIS', 'GLY', 'SER', 'GLU', 'ASP'],
                },
                y:{
                  label:"Concentración"
                }
            },
            transition: {
               duration: 2000
            }
        }); 

         setTimeout(function () {
            chartSensorial.load({
            columns: [
                    [5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5]
                ]
            });
          },2000)
        }
    }).state('B', {
        url: "/B",
        template: '<a ui-sref="A">BACK</a>',
        controller: function ($scope) {
            console.log("B");
        }
    });
})

.controller('MainCtrl', function ($scope, $state) {
 $state.go("A");
});

http://jsfiddle.net/yruj7n4e/

Answer 1

You should cancel your timeout when $scope is destroyed, this way you avoid acessing scope related stuff after scope is destroyed.

To do that you should first save the return of setTimeout , listen to $destroy and clear your timeout there:

var myTimeout = setTimeout(function () {
    chartSensorial.load({
        columns: [
            [5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5]
        ]
    });
},2000);

$scope.$on('$destroy', function(){
    clearTimeout(myTimeout); //clear timeout so if it didn't trigger yet it will never be triggered
});

By the way, I suggest you check anguar's $timeout instead of using setTimeout/clearTimeout

Answer 2

Why you need to have transition duration & chartSensorial.load timeout to 2000? Because of that it's interrupting the chart loading when you change state in between. If you change state after its complete load the error will not occur.

Or you can make those timeout small eg 100 (ms) each, so that it will load fast & you won't get those errors on console after changing states fast.

Working jsFiddle

PS Also in AngularJS app prefer using $timeout over setTimeout (so inside code will be angular's scope)