jquery - How to add delay time into line of code on JavaScript -

im trying function when user move cursor on image show preview. im taking src of image fired event , im changing path of different images.

$('#image').hover(function(){     var src = "";     var elem = $(this);     (var i=2; i<16; i++) {         src = elem.attr('src').split('.');         src[3] = i;          src = src.tostring();     src = src.split(',').join('.');     elem.attr('src', src);     } }); 

the problem here, when try below, putting delay every preview doesn't work want.

$('#image').hover(function(){     var src = "";     var elem = $(this);     (var i=2; i<16; i++) {         src = elem.attr('src').split('.');         src[3] = i;          src = src.tostring();         src = src.split(',').join('.');         settimeout(function() {             elem.attr('src', src);         }, 800);     } }); 

how can solve it? i'm working problem +2h

the problem cant use settimeout inside loop.. instead of use setinterval..

 $('#image').hover(function () {     var src = "";     var elem = $(this);     var = 2;     var interval = setinterval(function () {         if (i < 16) {             src = elem.attr('src').split('.');             src[3] = i;             src = src.tostring();             src = src.split(',').join('.');              elem.attr('src', src);             i++;         } else {             = 2;             clearinterval(interval);         }     }, 800); });