514-featured-cancel.js

// 読み込むとき、ES6 ( + browserify) だと便利
import Rx from "rx"; // ES6 modules

var images = ["1.png", "2.png", "3.png"];
function loadImages() {
  return Rx.Observable.create(loadImagesObservable);
}
function loadImagesObservable(observer) {
  var index = 0;
  var isCanceled = false;
  var loadImage = (name) => {
    var elem = document.createElement("image");
    elem.src = name;
    elem.onload = function() {
      // キャンセル時には、img の src を "" にすると
      // 読み込みを停止できるが、
      // そうするとスコープとかでややこしくなるので、
      // 現在読み込んでいる画像まで読みこむようにしている。
      if (!isCanceled) {
        observer.onNext(index);
        if (index >= images.length - 1) {
          observer.onCompleted();
        } else {
          loadImage(images[++index]);
        }
      }
    }
  };
  loadImage(images[index]);
  return function() {
    console.log("キャンセルされました。");
    isCanceled = true;
  };
}
function main() {
  var subscription = loadImages().subscribe((index) => {
    console.log(index + "個目を読み込みました");
  }, err => {
    console.log("Observe Error: " + err);
  }, () => {
    console.log("読み込み完了");
  });
  
  // 5秒後にキャンセルしてみる
  setTimeout(function() {
    subscription.dispose();
  }, 5000);
}