javascript中巧用“闭包”实现程序的暂停执行功能

闭包是JavaScript的一个重要概念，它可以创建独立的作用域，保护内部变量的安全性。除此之外，闭包还可以用来实现一些特殊的功能，比如程序的暂停执行。

具体来说，利用闭包实现程序的暂停执行，需要用到JavaScript中的generator（生成器）和Promise（承诺）这两个特性。下面是实现的详细攻略。

简单示例

首先，我们来看一个简单的示例，实现一个函数，可以让程序在调用时暂停执行，然后在调用某个方法后恢复执行。

function* pauseable() {
  console.log('Program started');
  yield;
  console.log('Program resumed');
}

const generator = pauseable();

generator.next();     // 程序开始
// 在这里可以做一些其他的事情
generator.next();     // 程序恢复

这段代码中，定义了一个 pauseable 函数生成器，其中 console.log('Program started') 会在程序开始时被执行，然后执行 yield 暂停程序。此时我们可以做一些其他的事情。最后再执行 generator.next() 来恢复程序，console.log('Program resumed') 会被执行。

这个示例比较简单，但是展示了利用生成器实现程序暂停执行的基本操作，接下来我们再看一个更加实用的示例。

实际应用

假设我们有一个需求，在网页上展示一些复杂的图片，为了避免图片加载过程中页面出现闪烁的情况，我们希望在图片加载完毕后再渲染页面。由于图片加载的时间是无法预计的，因此我们需要利用Promise和生成器来实现程序的暂停执行，等到图片加载完毕后再进行下一步操作。

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(url);
    image.onerror = () => reject(new Error(`Could not load image at ${url}`));
    image.src = url;
  });
}

function* loadImagesGenerator(images) {
  for (let i = 0; i < images.length; i++) {
    yield loadImage(images[i]);
  }
}

function loadImages(images) {
  const generator = loadImagesGenerator(images);

  function handleResult(result) {
    if (result.done) {
      console.log('All images loaded.');
      return;
    }

    result.value.then(url => {
      console.log(`Image ${url} loaded successfully.`);
      handleResult(generator.next());
    }).catch(error => {
      console.error(error);
    });
  }

  handleResult(generator.next());
}

// 调用
loadImages([
  'http://example.com/image1.jpg',
  'http://example.com/image2.jpg',
  'http://example.com/image3.jpg'
]);

这段代码中，我们首先定义了一个 loadImage 函数，用来加载图片。它返回一个 Promise 对象，当图片加载成功后会触发 resolve 方法，否则触发 reject 方法。

然后我们定义了一个函数生成器 loadImagesGenerator，它接受一个图片路径数组，返回值是每个图片加载完成的 Promise 对象。这个函数利用 for 循环遍历了所有的图片路径，对每个路径调用 loadImage 函数，然后使用 yield 暂停程序，直到加载完成才会恢复执行，并返回加载结果的 Promise 对象。

最后，我们定义了 loadImages 函数，它接受一个图片路径数组，然后初始化生成器，并通过 handleResult 函数来计算每个 Promise 的结果。每次 handleResult 函数被调用时，都会传入一个由 next() 方法返回的遍历器对象。如果对象的 done 属性为 true，表示所有的图片都已经加载完成了，程序直接退出。否则，我们通过 then 方法对 Promise 进行处理，当 Promise 完成时调用 handleResult 函数来处理结果，并通过 next() 方法继续遍历器对象。

到这里，你已经掌握了利用闭包来实现程序暂停执行的方法，可以尝试自己实现类似的功能。