所以,我有一个页面,当用户按住鼠标左键时,会在他/她的光标所在的位置绘制史莱克图像。问题是,当鼠标按下时只创建一张图片,但我需要 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
}
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() {
我是一名优秀的程序员,十分优秀!