Как завершить все события и циклы внутри функции jquery

155
03 июня 2019, 22:00

Всем добрый день. Недавно изучи канвас, и теперь пробую сделать его адаптивным, просто чтобы потренироваться. Проблема при resize() запускается функция Start(), с новыми параметрами длины и высоты (т.к. не получалось менять их динамически. В этом канвасе несколько таймеров и событий, ну и после ресайза та функция запускается еще раз, но таймеры и события не перестают работать - картинки накладываются одна на другую, и при большом количестве ресайзов начинает виснуть, ну логично. Так как мне отключать все события внутри Start при ресайзе окна? Вот ВЕСЬ код:

<style type="text/css">
    body{
        margin: 0;
    }
</style>
<script type="text/javascript">
    var x1;
    var y1;
    var ww = window.innerWidth;
    var wh = window.innerHeight;
    function selectGoing(x, y){
        return Math.floor(Math.random() * (y - x + 1)) + x;
    }
    function selectshag(x, y){
        return Math.floor(Math.random() * (y - x + 1)) + x;
    }
    function Start(){
        var canvas = $('.canv').get(0);
        var ctx = canvas.getContext('2d');
        var array_points = [];
        ctx.strokeStyle = 'white';
        ctx.fillStyle = 'white';
        for (var i = 0; i <= 150; i++) {
            array_points[i] = [];
            array_points[i]['x'] = Math.random()/1*ww;
            array_points[i]['y'] = Math.random()/1*wh;
            array_points[i]['z'] = selectGoing(0, 7);
            ctx.fillRect(array_points[i]['x'], array_points[i]['y'], 5, 5);
        }
        setInterval(function(){
            ctx.clearRect(0,0,ww,wh);
            for (var i = 0; i <= 150; i++) {
                var shag = 1;
                switch(array_points[i]['z']) {
                  case 0: //вверх
                    if (array_points[i]['x'] + 0 < ww-3 && array_points[i]['y'] - shag < 0) {
                            array_points[i]['y'] = wh-3;
                        }
                        array_points[i]['x'] += 0;
                        array_points[i]['y'] -= shag;
                  break;
                  case 1: //вверх вправо
                        if(array_points[i]['x'] + shag/2 > ww-3){
                            array_points[i]['x'] = 0;
                        }
                        if(array_points[i]['y'] - shag/2 < 0){
                            array_points[i]['y'] = wh-3;
                        }
                        array_points[i]['x'] += shag/2;
                        array_points[i]['y'] -= shag/2;
                  break;
                  case 2: //вправо
                    if(array_points[i]['x'] +  shag > ww-3){
                        array_points[i]['x'] = 0;
                    }
                     array_points[i]['x'] += shag;
                     array_points[i]['y'] += 0;
                  break;
                  case 3: //вниз вправо
                    if(array_points[i]['x'] +  shag/2 > ww-3){
                        array_points[i]['x'] = 0;
                    }
                    if(array_points[i]['y'] + shag/2 > wh-3){
                        array_points[i]['y'] = 0;
                    }
                     array_points[i]['x'] += shag/2;
                    array_points[i]['y'] += shag/2;
                  break;
                  case 4: //вниз
                  if (array_points[i]['y'] +  shag > wh-3) {
                       array_points[i]['y'] = 0;
                    }
                     array_points[i]['x'] -= 0;
                        array_points[i]['y'] += shag;
                  break;
                  case 5: //вниз вліво
                    if(array_points[i]['x'] -  shag/2 < 3){
                        array_points[i]['x'] = ww-3
                    }
                    if(array_points[i]['y'] + shag/2 > wh-3){
                        array_points[i]['y'] = 0
                    }
                    array_points[i]['x'] -= shag/2;
                    array_points[i]['y'] += shag/2;
                  break;
                  case 6: //вліво
                   if (array_points[i]['x'] - shag < 3) {
                        array_points[i]['x'] = ww-3;
                    }
                    array_points[i]['x'] -= shag;
                    array_points[i]['y'] -= 0;
                  break;
                  case 7: //вверх вліво
                    if(array_points[i]['x'] -  shag/2 < 3 ){
                        array_points[i]['x'] = ww-3;
                    }
                    if(array_points[i]['y'] - shag/2 < 3){
                        array_points[i]['y'] = wh-3;
                    }
                    array_points[i]['x'] -= shag/2;
                    array_points[i]['y'] -= shag/2;
                  break;
                }
                ctx.fillRect(array_points[i]['x'], array_points[i]['y'], 5, 5);
            }
            ctx.clearRect(0,0,ww,wh);
            ctx.beginPath();
            for (var i = 0; i <= 150; i++) {
                ctx.fillRect(array_points[i]['x'], array_points[i]['y'], 5, 5);
                /*ctx.fillStyle = "#ffffff";
                ctx.fillText(array_points[i]['z'], array_points[i]['x'], array_points[i]['y']);*/
                var x2 = +array_points[i]['x'];
                var y2 = +array_points[i]['y'];
                var length = Math.pow(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2), 0.5);
                if (length < 150) {
                    ctx.moveTo(x2, y2);
                    ctx.lineTo(x1, y1);
                }
            }
            ctx.stroke();
        }, 10);
        $('.canv').on('mousemove', function(event){
            x1 = event.offsetX;
            y1 = event.offsetY;
        });
    }
    function ResizeAll(){
        ww = window.innerWidth;
        wh = window.innerHeight;
        $('.canv').attr('width', ww);
        $('.canv').attr('height', wh);
        $('.canv').css('width', ww);
        $('.canv').css('height', wh);
        Start();
    }
    $(document).ready(function(){
        ResizeAll();
        $(window).resize(function(){
            ResizeAll();
        });
    });
</script>
            <canvas class="canv" style="width: 100%; height: 100%;border: 1px solid black; margin: auto; background-color: black;" width="ww" height="wh">
Answer 1
var resize = function(e){
  console.log(e);
};
(function(){
  var time;
  window.onresize = function(e){
    if (time)
      clearTimeout(time);
    time = setTimeout(function(){
      resize(e);
    },1000);
  }
})();

Как только Вы перестанете изменять размеры окна, через секунду после этого произойдет вызов вашей функции

READ ALSO
Помогите построить SQL-запрос

Помогите построить SQL-запрос

Вообщем не работает только из-за MAX(tecdoc_crosscross_num) + 1 Помогите пожалуйста найти решение

168
Очередная проблема с кодировкой MySQL

Очередная проблема с кодировкой MySQL

Очередная проблема с кодировкой, в таблице русские символы отображаются некорректно

166
Как выровнять div по правомю краю

Как выровнять div по правомю краю

Есть несколько инлайн блоков, которые размещаются по центру экрана, нужно выровнять третий по правому краю, не применяя свойство float (пример)

249