Создайте анимацию, пока пользователь витает над холстом.

Question

Я пытаюсь добавить изображения и оживить их, когда пользователь зависает на холсте, и как только они перемещают мышь с холста, я хочу остановить появление новых изображений.

Для этого я попытался установить интервал на новом изображении, чтобы запускать каждые 100 мс, а затем, если пользователь перемещает мышь с холста, эта функция должна прекратить запуск.

canvas.addEventListener("mouseover", setInterval(newImage, 100), false); 
canvas.addEventListener("mouseout", clearInterval(newImage), false); 

JS КОД НИЖЕ

//gets canvas element 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 

 
    function newImage() { 
 

 
    //random position on the canvas 
 
    var randomPosition = parseInt(Math.random() * window.innerWidth); 
 

 
    var images = [ 
 
     'http://www.convoy.me/image/landing/Scratcher.png', 
 
     'http://www.convoy.me/image/landing/push_harder_0006.png' 
 
    ]; 
 

 
    var y = window.innerHeight; 
 

 
    //selects a random image 
 
    var randomImage = parseInt(Math.random() * images.length); 
 

 
    //IIFE draw 
 
    (function draw() { 
 
     var imageObj = new Image(); 
 
     imageObj.onload = function() { 
 

 
     ctx.clearRect(randomPosition - imageObj.width, y, imageObj.width, imageObj.height); 
 

 
     y -= 10; 
 

 
     ctx.drawImage(imageObj, randomPosition - imageObj.width, y, imageObj.width, imageObj.height); 
 

 
     if (y > -imageObj.height) { 
 
      requestAnimationFrame(draw) 
 
     } 
 
     }; 
 
     imageObj.src = images[randomImage]; 
 
    })(); 
 
    } 
 

 
    canvas.addEventListener("mouseover", setInterval(newImage, 100), false); 
 
    canvas.addEventListener("mouseout", clearInterval(newImage), false);

<canvas id="canvas"></canvas>

Answer 1

Я предполагаю, что проблема заключается в том, что интервал не очищает. Необходимо назначить интервал переменной, а затем очистить интервал от имени переменной:

var newImageInterval; 

canvas.addEventListener("mouseover", function(){ 
    newImageInterval = setInterval(newImage, 100); 
}, false); 
canvas.addEventListener("mouseout", function(){ 
    clearInterval(newImageInterval); 
}, false);