Refire On Window Resize

时间:2018-06-07 12:42:55

标签: javascript jquery canvas

我有这个完整的随机图形条脚本,包含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/,但小提琴不能正确显示问题。

1 个答案:

答案 0 :(得分:2)

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() {...});

但我可能错了,这不是你问题的一部分,所以,无论如何:)