时间戳

首页 > 解决方案 > setInterval 函数在两次激活时无限期运行？

p5.js - setInterval 函数在两次激活时无限期运行？

问题描述

我在一个简单的草图中使用 setInterval，它以随机颜色、旋转和位置生成形状 + 文本五次（使用计数器）。它在按下按钮时激活，并在按下按钮一次时工作。但是，当在前五个向下绘制之前按下按钮时，该功能会无限重复。希望得到有关如何修复的提示。

var canvas;
var interval; 
var counter = 0;
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

function setup () {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.position(0, 0);
    canvas.style('z-index', '-1')
    background('white');

    inp = createInput();
    inp.position(80, 150);
    inp.input(inputEvent);

    button = createButton('Go');
    button.position(85 + inp.width, 150);
    button.mousePressed(indefSomewhere);
}

function inputEvent() {
    console.log(this.value())
}

function goSomewhere() {
    const place = inp.value();
    // for (let i = 0; i < 20; i++) {
        push();
        fill(random(255), random(255), random(255));
        translate(random(width), random(height));
        rotate(random(2*PI));
        noStroke();
        beginShape();
        
        vertex(80, 50);
        vertex(300, 50);
        vertex(350, 95);
        vertex(300, 140);
        vertex(80, 140);
        scale(0.5);
        endShape(CLOSE);
        push();
        fill(random(255), random(255), random(255));
        text(place, 100, 124);
        pop();
        pop();
        counter++;
        console.log(counter);
        if(counter >= 5) {
            counter = 0;
            clearInterval(interval);
            console.log(counter);
        } else if(counter === 0 ) {
            clearInterval(interval);
        }
    //   }
}

function indefSomewhere() {
    interval = setInterval(goSomewhere, 100);
}


function draw() {
    fill(0);
    beginShape();
    vertex(80, 50);
    vertex(300, 50);
    vertex(350, 95);
    vertex(300, 140);
    vertex(80, 140);
    endShape(CLOSE);
    fill(255);
    if(inp.value() != null) {
        textSize(32);
        text(inp.value(), 87.5, 125);
    }
}

编辑：好的，我在 indefSomewhere() 函数中添加了一个明确的间隔，它可以防止无限期地绘制形状。但是双击不会激活绘图两次。对于这种情况，setInterval 仅仅是错误的选择吗？

标签： p5.js

解决方案

如果在已设置间隔的情况下调用 setInterval() 时出现问题，我会这样做，如果尚未设置间隔，则调用 setInterval()，但如果已设置，则将 +5 添加到柜台。

这可能是代码：

var canvas;
var interval;
var intervalSet;
var counter = 0;
var maxCounter;

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

function setup () {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.position(0, 0);
    canvas.style('z-index', '-1')
    background('white');

    inp = createInput();
    inp.position(80, 150);
    inp.input(inputEvent);

    button = createButton('Go');
    button.position(85 + inp.width, 150);
    button.mousePressed(indefSomewhere);
}

function inputEvent() {
    console.log(this.value())
}

function goSomewhere() {
    const place = inp.value();
    // for (let i = 0; i < 20; i++) {
        push();
        fill(random(255), random(255), random(255));
        translate(random(width), random(height));
        rotate(random(2*PI));
        noStroke();
        beginShape();
        
        vertex(80, 50);
        vertex(300, 50);
        vertex(350, 95);
        vertex(300, 140);
        vertex(80, 140);
        scale(0.5);
        endShape(CLOSE);
        push();
        fill(random(255), random(255), random(255));
        text(place, 100, 124);
        pop();
        pop();
        counter++;
        console.log(counter);
        if(counter >= maxCounter) {
            counter = 0;
            intervalSet = false;
            clearInterval(interval);
            console.log(counter);
        } else if(counter === 0 ) {
            intervalSet = false;
            clearInterval(interval);
        }
    //   }
}

function indefSomewhere() {
  if(!intervalSet){
    maxCounter = 5;
    intervalSet = true;
    interval = setInterval(goSomewhere, 100);
  }else{
    maxCounter += 5;
  }
    
}


function draw() {
    fill(0);
    beginShape();
    vertex(80, 50);
    vertex(300, 50);
    vertex(350, 95);
    vertex(300, 140);
    vertex(80, 140);
    endShape(CLOSE);
    fill(255);
    if(inp.value() != null) {
        textSize(32);
        text(inp.value(), 87.5, 125);
    }
}

这是一个相关的问题。

推荐阅读