javascript图像滑块启动

Question

I'm trying to understand javascript before going to jQuery and I made a simple image slider.

I ended up with the following code working well when I manually start it on browser console, and I can't figure out how to start it and if using Promise would do, and how.

Reduced code:

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

Full code:

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

Haven't tested this but it might come close:

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

modify cut() to:

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

replace

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

with:

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