Добавить паузы в эффект сглаживания JavaScript

Question

У меня есть эффект, который заставляет элемент холста «сбой». Я хотел бы отредактировать эффект, чтобы между каждым сбоем было больше паузы - на данный момент пауза с ошибкой слишком короткая, и сбой слишком близок к тому, что было раньше. Вы можете увидеть его в действии здесь: 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

Для достижения эффекта необходимо, мне пришлось переписать функцию инициализации(), а также добавить функцию перерисовки(), как это:

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); 
} 

Answer 2

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 секунды. SetInterval внутри функции, запускаемой glitchInterval, имеет продолжительность randInt(250, 1000), что, вероятно, является случайной продолжительностью между 0,25 и 1 секундой. Вы можете изменить эти длительности, чтобы достичь желаемого результата.