Как мне создать несколько изображений Шрека подряд?

Question

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

Вот код:

var shrekId = 0;

document.onmousemove = function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

document.body.onmousedown = function(event) {
  shrekId = 0;
  interval = setInterval(draw(event), 100);
}

document.body.onmouseup = function() {
  clearInterval(interval);
}

function draw(event) {
  this["img" + shrekId] = document.createElement("img");
  this["img" + shrekId].src = "http://pngimg.com/uploads/shrek/shrek_PNG3.png";
  this["img" + shrekId].style = "height: 100px; width: 100px; position: absolute; left: " + (mouseX - 50) + "px; top: " + (mouseY - 50) + "px; x-index: 100;";
  this["img" + shrekId].ondragstart = function() { return false; };
  document.body.appendChild(this["img" + shrekId]);
  shrekId += 1
}

Answer 1

Вы передаете результат выполнения функции вместо самой функции.Поскольку результат функции не определен, вы выполняете рисование, а затем передаете undefined в setInterval, который ничего не делает.

Вместо этого:

setInterval(draw(), 100);

Ваше утверждение должно быть следующим:

setInterval(draw, 100);

без скобок в конце имени функции.

Когда вы передаете метод draw (), который немедленно вызывает функцию и получает возвращаемое значение.Когда вы передаете draw, который передает ссылку на функцию, setInterval может вызвать ее в будущем (что вы и ожидаете).

Answer 2

setInterval() принимает функцию в качестве параметра, это делается путем передачи имени функции (без скобок) следующим образом:

myFunc()
{
    console.log('hello');
    return 1;
}
setInterval(myFunc, 100);

Когда вы включаете скобки (как вы это делали впример), она запустит функцию, возьмет возврат этой функции и передаст его в setInterval.Например:

myFunc()
{
    console.log('hello');
    return 1;
}
setInterval(myFunc(), 100);

превращается в

setInterval(1, 100);

, потому что myFunc () возвращает 1.

Таким образом, вы сможете исправить свой код, сняв скобки сваш интервал:

interval = setInterval(draw(event), 100);
// to
interval = setInterval(draw, 100);

Это также означает, что вы должны удалить параметр из функции:

function draw(event) {
// to
function draw() {

Answer 3

Проблема с этой строкой: interval = setInterval(draw(event), 100);

Первый параметр setInterval должен быть функцией, но вы вызываете функцию здесь и передаете результат, попробуйте следующее:

interval = setInterval(() => { draw(event) }, 100);

Или, если вы не поддерживаете ES6:

interval = setInterval(function() { draw(event) }, 100);

Не похоже, что вы используете event внутри функции рисования, хотя, если это так, вы можете просто передать саму функцию рисования:

interval = setInterval(draw, 100);