Refire On Window Resize

Question

我有这个完整的随机图形条脚本，包含Chart.js和canvas元素。

当我通过检查元素来调整窗口大小或在平板电脑/手机大小中测试脚本时，它不会调整大小（因为预期的css），并且干扰了我的检查过程。我试图让脚本重新启动窗口调整大小，但我无法让它工作，尝试一些不同的方法。

脚本：

(function($) {

  $(document).ready(function(barChart) {
    (function() {
      var data = [],
        barsCount = 24,
        labels = new Array(barsCount),
        updateDelayMax = 500,
        $id = function(id) {
          return document.getElementById(id);
        },
        random = function(max) {
          return Math.round(Math.random() * 100)
        },
        helpers = Chart.helpers;
      Chart.defaults.global.responsive = true;
      for (var i = barsCount - 1; i >= 0; i--) {
        data.push(Math.round(Math.random() * 100));
      };
      new Chart($id('header-random-bar-graph').getContext('2d')).Bar({
        labels: labels,
        datasets: [{
          fillColor: 'rgba(220,220,220,0.1)',
          data: data
        }]
      }, {
        showScale: false,
        barShowStroke: false,
        barValueSpacing: 1,
        showTooltips: false,
        onAnimationComplete: function() {
          var heroChart = this,
            timeout;
          this.options.onAnimationComplete = randomUpdate;
          this.options.animationEasing = 'easeOutQuint';
          randomUpdate();

          function randomUpdate() {
            heroChart.stop();
            clearTimeout(timeout);
            timeout = setTimeout(function() {
              var randomNumberOfBars = Math.floor(Math.random() * barsCount),
                i;
              for (i = randomNumberOfBars - 1; i >= 0; i--) {
                heroChart.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100);
              };
              heroChart.update();
            }, Math.random() * updateDelayMax);
          };
        }
      });
    })();
  });

})(jQuery);

我尝试添加到最后：

$(window).resize(barChart);

然后我在Chrome中遇到控制台错误：“barChart未定义”。

jsFiddle：https://jsfiddle.net/q44qbdov/4/，但小提琴不能正确显示问题。

Answer 1

barChart进一步定义了一些函数，你必须将它比你的小提琴更进一步。

(function($) {

  $(document).ready(function(barChart) { 
    //barChart is only defined within this closure
    (function() {
      //your code...
    })();
    $(window).resize(barChart);
  });

})(jQuery);

修改

如果我理解正确，当您调整窗口大小时，您会尝试再次调用$(document).ready上调用的方法。对上述代码的一点修改就是：

(function($) {

  $(document).ready(function() { 
    //define a function to use it again as a handler
    function barChart() {
      //your code...
    });

    //execute the function
    barChart();

    //set function as resize event handler
    $(window).resize(barChart);
  });

})(jQuery);

顺便说一下：我认为你不需要

(function($) {...})(jQuery);

以及

$(document).ready(function() {...});

但我可能错了，这不是你问题的一部分，所以，无论如何：）