首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >JavaScript:函数在循环时给出“不是函数”

JavaScript:函数在循环时给出“不是函数”
EN

Stack Overflow用户
提问于 2015-08-19 04:33:32
回答 1查看 115关注 0票数 0

当我运行tick()函数时,它工作得很完美,但是当我使用setInterval(this.tick,this.interval)循环它时,tick()中的所有函数都会给出以下错误:Uncaught TypeError: this.{a function} is not a function

这是完整的代码:

代码语言:javascript
运行
复制
function Particles(settings){
this.canvas = document.getElementById('particle-js');
this.context = this.canvas.getContext('2d');
this.fps = 60;
this.interval = 1000/this.fps;
this.TWO_PI = Math.PI*2;
this.mousePosition;


this.tick = function(){
    console.log("tick");


    this.drawNodes();
    this.clear();

}

setInterval(this.tick,this.interval);

this.generateNodes = function generateNodes(){
    var nodes = [];


    for(var i = 0; i < 1; i++){
        var node = {
            origin: {
                x: this.random(0, this.canvas.width),
                y: this.random(0, this.canvas.height)
            },
            direction: this.random(0,359),
            subNodes: []
        }
        for(var j = 0; j < this.random(1,8); j++){
            var subNode = {
                xOffset: this.random(-50,50),
                yOffset: this.random(-50,50),
                distance: function(){
                    var x = Math.pow(this.xOffset,2);
                    var y = Math.pow(this.yOffset,2);
                    return Math.sqrt(x + y);
                }
            }
            while(subNode.distance() < 20){
                subNode = {
                    xOffset: this.random(-50,50),
                    yOffset: this.random(-50,50),
                    distance: function(){
                        var x = Math.pow(this.xOffset,2);
                        var y = Math.pow(this.yOffset,2);
                        return Math.sqrt(x + y);
                    }
                }
            }
            node.subNodes.push(subNode);
        }
        nodes.push(node);
    }

    console.log("generated: " + nodes.length);

    return nodes;
}

this.canvas.addEventListener('mousemove', function(evt) {
    if(evt.offsetX) {
        mouseX = evt.offsetX;
        mouseY = evt.offsetY;
    }
    else if(e.layerX) {
        mouseX = evt.layerX;
        mouseY = evt.layerY;
    }
    this.mousePos = {
        x: mouseX,
        y: mouseY
    }
}, false);

this.drawNodes = function drawNodes(){
    for(var k = 0; k < this.nodes.length; k++){
        var current_node = this.nodes[k];
        this.fillCircle(current_node.origin.x,current_node.origin.y, 3);

        for(var l = 0; l < current_node.subNodes.length; l++){
            var current_subNode = current_node.subNodes[l];

            this.fillLine(current_node.origin.x,current_node.origin.y,current_node.origin.x + current_subNode.xOffset, current_node.origin.y + current_subNode.yOffset)
            this.fillCircle(current_node.origin.x + current_subNode.xOffset, current_node.origin.y + current_subNode.yOffset, 2);
        }
    }
}

this.fillCircle = function fillCircle(x, y, radius, color){
    if(color == undefined || color == false){
        color = "black";
    }
    this.context.fillStyle = color;
    this.context.beginPath();
    this.context.arc(x,y,radius,0,this.TWO_PI,false);
    this.context.fill();
}
this.fillLine = function fillLine(xFrom, yFrom, xTo, yTo, color){
    if(color == undefined || color == false){
        color = "black";
    }
    this.context.beginPath();
    this.context.moveTo(xFrom,yFrom);
    this.context.lineTo(xTo, yTo);
    this.context.lineWidth = 1;
    this.context.stroke();
}
this.clear = function clear(color){
    if(color == undefined || color == false){
        color = "white";
    }
    this.context.fillStyle = color;
    this.context.fillRect(0,0,this.canvas.width,this.canvas.height);
}

this.random = function random(min, max){
    return min+Math.round((max-min)*Math.random());
}

this.nodes = this.generateNodes();

}

控制台显示如下:

EN

回答 1

Stack Overflow用户

发布于 2015-08-19 04:36:14

这是因为setTimeout回调函数的上下文没有绑定到您的对象,请尝试执行以下操作:

代码语言:javascript
运行
复制
setInterval(this.tick.bind(this), this.interval);
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32082105

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档