javascript image slider start

Question

jQueryに行く前にjavascriptを理解しようとしていて、簡単な画像スライダーを作った。

ブラウザコンソールで手動で起動すると以下のコードが正常に動作してしまいましたが、起動方法やPromiseを使用する場合はどうすればよいかわかりません。

削減コード：

/*some variable declarations and value assignations*/ 
function cut(p1){ 
    for (var i = 0; i < cuts; i++){ 
     /*canvas working with path pattern and fill*/ 
     slice[p1][i] = new Image(); 
     slice[p1][i].src = canvas.toDataURL(); 
    } 
} 
function slider(){ 
    /*time based image selection and canvas clear*/ 
    for (var i = 0; i < 10; i++){ 
     y = /*timebased calc*/; 
     if(y<0){y=0;} 
     ctx.drawImage(slice[im][i], 0, y); 
    } 
    window.requestAnimationFrame(slider); 
} 
img[0].onload = function() {cut(0);}; 
img[1].onload = function() {cut(1);}; 

完全なコードは：

var height = 500, width = 707, cuts = 10, cW = Math.ceil(width/cuts); 
var img = [new Image(), new Image()]; 
var slice = []; 
for (var i = 0; i < img.length; i++){ 
    slice[i] = []; 
} 
var x = []; 
for (var i=0; i<cuts; i++){ 
    x[i]=Math.ceil(((i+1)*width)/cuts); 
} 
function cut(p1){ 
    for (var i = 0; i < cuts; i++){ 
     var canvas = document.createElement('canvas'); 
     canvas.width = width; 
     canvas.height = height; 
     var context = canvas.getContext('2d'); 
     var pat = context.createPattern(img[p1], 'no-repeat'); 
     context.fillStyle = pat; 
     context.beginPath(); 
     context.moveTo(x[i], 0); 
     context.lineTo(x[i], height); 
     context.lineTo(x[i]-cW, height); 
     context.lineTo(x[i]-cW, 0); 
     context.closePath(); 
     context.fill(); 
     slice[p1][i] = new Image(); 
     slice[p1][i].src = canvas.toDataURL(); 
    } 
} 
var canv = document.createElement('canvas'); 
document.body.appendChild(canv); 
canv.width = width; 
canv.height = height; 
var ctx = canv.getContext('2d'); 
var sTime= 0; 
function slider(){ 
    var t = (performance.now() - sTime) % 10000; 
    if(t%5000 === 2000){ 
     ctx.clear(); 
    } 
    var im = 0; 
    if(t >= 5000){ 
     im = 1; 
    } else { 
     im = 0; 
    } 
    for (var i = 0; i < 10; i++){ 
     t = t%5000; 
     y = 2000-((t)+(i*100)); 
     if(y<0){y=0;} 
     ctx.drawImage(slice[im][i], 0, y); 
    } 
    window.requestAnimationFrame(slider); 
} 
CanvasRenderingContext2D.prototype.clear = function() {this.clearRect(0, 0, this.canvas.width, this.canvas.height);} 
img[0].onload = function() {cut(0);}; 
img[1].onload = function() {cut(1);}; 
img[0].src = 'mountain.jpg'; 
img[1].src = 'beach.jpg'; 

Answer 1

はこれをテストしていませんが、それは近くに来るかもしれない：

function imageLoader(imagePaths, onLoad, onFinished) { 
    var images = []; 
    var arrayLength = imagePaths.length; 

    function callback() { 
    if(--arrayLength === 0) onFinished(); 
    } 

    imagePaths.forEach(function(imagePath, index) { 
    var image = new Image(); 
    image.onload(onLoad(index, callback)); 
    image.src = imagePath; 
    images[index] = image; 
    }); 
    return images; 
} 

にカット（）修正：

を

function cut(p1, cb){ 
    //. 
    //. 
    //. 
    cb(); 
} 

置き換えると

img[0].onload = function() {cut(0);}; 
img[1].onload = function() {cut(1);}; 
img[0].src = 'mountain.jpg'; 
img[1].src = 'beach.jpg'; 

：

img = imageLoader(['mountain.jpg', 'beach.jpg'], cut, slider);