javascript - 为 JavaScript 故障效果添加暂停

Question

我有一个导致 Canvas 元素出现“故障”的效果。我想编辑效果，以便每个故障之间有更多的暂停 - 截至目前，故障暂停太短，并且故障与之前的故障太接近。您可以在这里看到它的实际效果: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 秒之间的随机持续时间。您可以更改这些持续时间以获得所需的结果。