Uncaught TypeError: X is not a function. While using javascript closure

Question

我正在玩 JavaScript 并在控制台中看到以下错误：

Uncaught TypeError: div is not a function.

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function createDiv(interval) {
    let radius = 300;
    let int = interval;
    var f = 0;
    var s = 2 * Math.PI / 180;
    let timerId = window.setTimeout(function tick()
    {
        var div = document.createElement('div');
        div.className = 'circle';
        div.style.backgroundColor = getRandomColor();
        div.style.left = (radius + radius * Math.cos(f)) + 'px';
        div.style.top = (radius + radius * Math.sin(f)) + 'px';
        document.body.appendChild(div);
        f += s;
        setTimeout(tick, int);
    }, int)

}

let div = createDiv(10);
div();

为简单起见，我保留了以下内容：

function createDiv(interval) {
    let timerId = window.setTimeout(function tick()
    {
        setTimeout(tick, 10);
    }, 10)
}

let div = createDiv(10);
div();

这本质上是一个无限循环。调用 div() 但循环正常时发生错误。

怎么了？它是如何修复的？

Answer 1

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function createDiv(interval) {
    let radius = 300;
    let int = interval;
    var f = 0;
    var s = 2 * Math.PI / 180;
    window.setTimeout(function tick()
    {
        var div = document.createElement('div');
        div.className = 'circle';
        div.style.backgroundColor = getRandomColor();
        div.style.left = (radius + radius * Math.cos(f)) + 'px';
        div.style.top = (radius + radius * Math.sin(f)) + 'px';
        document.body.appendChild(div);
        f += s;
        setTimeout(tick, int);
    }, int)

}

let div = createDiv(10);
console.log(div);
try {
  div();
} catch (err) {
  console.log('error')
}


function createDivSmall(interval) {
   window.setTimeout(function tick()
    {
        setTimeout(tick, interval);
    }, 10)
}

let divSmall = createDivSmall(10);
console.log(divSmall);
try {
  divSmall();
} catch (err) {
  console.log('Small error')
}

在你的 createDiv 函数中你没有 returning 任何东西，所以默认行为是 return undefined。这设置 div = undefined。此时 div 不是函数，因此尝试调用它会抛出错误。 createDiv 正在为您启动循环，运行它不需要将变量设置为 return 值。

Answer 2

这里没有闭包：您正在调用一个 returns undefined 的函数并试图调用 undefined() 就好像它是一个函数一样。只需像 createDiv(10); 这样调用您的函数。请注意，我为您的 div 添加了高度和宽度，因此结果可见。

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function createDiv(interval) {
  let radius = 300;
  let int = interval;
  var f = 0;
  var s = 2 * Math.PI / 180;
  let timerId = window.setTimeout(function tick() {
    var div = document.createElement('div');
    div.className = 'circle';
    div.style.backgroundColor = getRandomColor();
    div.style.height = div.style.width = "50px";
    document.body.appendChild(div);
    f += s;
    setTimeout(tick, int);
  }, int)
}

createDiv(1000);

Uncaught TypeError: X is not a function. While using javascript closure

Uncaught TypeError: X is not a function. While using javascript closure

javascript

closures

infinite-loop

settimeout