如何连续创建多个史莱克图像？答案

【问题标题】：How do I create several shrek images in a row?如何连续创建多个史莱克图像？
【发布时间】：2019-04-03 14:14:45
【问题描述】：

所以，我有一个页面，当用户按住鼠标左键时，会在他/她的光标所在的位置绘制史莱克图像。问题是，鼠标按下时只创建了一张图片，但我需要一个 ENDLESS CURRENT OF SHREKS。

代码如下：

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
}

【问题讨论】：

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

标签： javascript html css web

【解决方案1】：

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() {

【讨论】：

【解决方案2】：

问题出在这一行：interval = setInterval(draw(event), 100);

setInterval 的第一个参数应该是一个函数，但你在这里调用函数并传入结果，请尝试以下操作：

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

或者如果你不支持 ES6：

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

看起来您并没有在 draw 函数内部使用 event，如果是这种情况，您可以只传递 draw 函数本身：

interval = setInterval(draw, 100);

【讨论】：

【解决方案3】：

您传递的是执行函数的结果，而不是函数本身。由于函数的结果是未定义的，因此您正在执行绘制，然后将未定义传递给 setInterval，它什么都不做。

而不是这个：

setInterval(draw(), 100);

你的陈述应该是这样的：

setInterval(draw, 100);

函数名末尾不带括号。

当您传递 draw() 时，它会立即调用该函数并获取它的返回值。当您通过 draw 传递对函数的引用时，setInterval 可以在将来调用它（这是您所期望的）。

【讨论】：