为 JavaScript 故障效果添加暂停答案

【问题标题】：Add pauses to a JavaScript glitch effect为 JavaScript 故障效果添加暂停
【发布时间】：2015-12-23 19:01:47
【问题描述】：

我有一个导致画布元素“故障”的效果。我想编辑效果，以便在每个故障之间有更多的停顿 - 到目前为止，故障暂停太短并且故障与之前的故障太接近。你可以在这里看到它的实际效果：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 但无法真正弄清楚。任何帮助表示赞赏。

【问题讨论】：

标签： javascript settimeout setinterval visual-glitch

【解决方案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 秒之间的随机持续时间。您可以更改这些持续时间以获得所需的结果。

【讨论】：

我这样做了，但这只会改变故障“出现故障”的时间。不是每个故障之间的持续时间。
这没有任何意义。每个毛刺之间的时间是每个毛刺之间的持续时间。这是同一件事。您能否澄清“故障发生的时间”和“每个故障之间的持续时间”之间的区别？
1.图像出现毛刺的时间（在偏移位置停留多长时间）， 2. 每次毛刺之间的时间。两种不同的东西。
好的，我现在明白了，我更新了我的答案。我希望它有所帮助。
我认为你低估了我的问题。我不是初学者，我不会在编辑两个可以得出持续时间的明显位置时遇到困难。问题是，当我编辑 setInterval 时，图像在设定的时间内保持故障。这意味着每个单独故障之间的间隔现在很好，但图像仍然存在故障。我认为是内部setTimeout造成的，被setInterval否决，等待它先通过。

【解决方案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);
}

【讨论】：