javascript图像滑块启动

在进入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);};

/*一些变量声明和值赋值*/
功能切断（p1）{
对于（变量i=0；i如果（y没有进行测试，但可能接近：

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

将cut（）修改为：

替换

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

与：

尚未对此进行测试，但可能很接近：

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

将cut（）修改为：

替换

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

与：

如何手动启动？我的意思是，我在浏览器控制台“slider（）”上写下手动启动。我真正想知道的是，在启动动画之前，如何确保每个“切片”都填充了图案。因此，在两个图像加载并剪切（0）和剪切（1）后，您需要调用slider（）完成？您要如何手动启动它？我的意思是我在浏览器控制台“slider（）”上写下手动启动。我真正想知道的是，在我启动动画之前，如何确保每个“切片”都填充了图案。因此，您想在两个图像加载并剪切（0）和剪切（1）完成后调用slider（）？
img = imageLoader(['mountain.jpg', 'beach.jpg'], cut, slider);