为 JavaScript 故障效果添加暂停

Question

我有一个导致 canvas 元素变为 "glitch" 的效果。我想编辑效果，使每个故障之间有更多的停顿——到目前为止，故障停顿太短，而且故障与之前的故障太接近了。您可以在此处查看实际效果：http://naratif.jvitasek.cz/

另外，故障代码如下：

function glitchElement(sourceImg, idCanvas) {
    var canvas = document.getElementById(idCanvas)
      , context = canvas.getContext('2d')
      , img = new Image()
      , w
      , h
      , offset
      , glitchInterval;

    img.src = sourceImg;
    img.onload = function() {
      init();
        window.onresize = init;
    };

    var init = function() {
        clearInterval(glitchInterval);
        canvas.width = w = window.innerWidth;
        offset = w * .1;
        canvas.height = h = ~~(230 * ((w - (offset * 2)) / img.width));
        glitchInterval = setInterval(function() {
            clear();
            context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
            setTimeout(glitchImg, randInt(250,1000));
        }, 500);
    };

    var clear = function() {
        context.rect(0, 0, w, h);
        context.fillStyle = "white";
        context.fill();
    };

    var glitchImg = function() {
        for (var i = 0; i < randInt(1, 13); i++) {
            var x = Math.random() * w;
            var y = Math.random() * h;
            var spliceWidth = w - x;
            var spliceHeight = randInt(5, h / 3);
            context.drawImage(canvas, 0, y, spliceWidth, spliceHeight, x, y, spliceWidth, spliceHeight);
            context.drawImage(canvas, spliceWidth, y, x, spliceHeight, 0, y, x, spliceHeight);
        }
    };

    var randInt = function(a, b) {
        return ~~(Math.random() * (b - a) + a);
    };
}

在此代码中，必须有一种方法可以延长暂停时间。这意味着保持现在的一切，但是出现故障......等待更长时间的图像没有效果（静态）......然后在大约 6 秒后再次出现故障（我认为现在它在 1 到 1.5 秒之间） .

我只需要库函数的名称或可以帮助我做到这一点的名称。我查看了 setTimeout 和 setInterval，但无法真正弄明白。任何帮助表示赞赏。

Answer 1

setTimeout 有两个参数：一个要调用的函数，以及调用该函数的持续时间（以毫秒为单位）。在您的代码中有两个 setTimeouts:

glitchInterval = setInterval(function() {
    clear();
    context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
    setTimeout(glitchImg, randInt(250,1000));
}, 500);

glitchInterval 的持续时间为 500，即 0.5 秒。由 glitchInterval 触发的函数内部的 setInterval 持续时间为 randInt(250, 1000)，这可能是 0.25 到 1 秒之间的随机持续时间。您可以更改这些持续时间以获得所需的结果。

Answer 2

为了达到所需的效果，我不得不重写 init() 函数并添加一个 redraw() 函数，如下所示：

var init = function() {
    clearInterval(glitchInterval);
    canvas.width = w = window.innerWidth;
    offset = w * 0.1;
    canvas.height = h = ~~(230 * ((w - (offset * 2)) / img.width));
    glitchInterval = setInterval(function() {
        clear();
        console.log('glitching');
        context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
        glitchImg();
        setTimeout(function() {
            clear();
            redraw();
            console.log('redrawing');
        }, randInt(100,1000)); // the time the image is glitched
    }, randInt(5000,10000)); // the interval between each glitch
};

重绘函数：

function redraw() {
    context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
}

为 JavaScript 故障效果添加暂停

Add pauses to a JavaScript glitch effect

javascript

settimeout

setinterval

visual-glitch