Javascript 为什么Codepen.io不显示此笔的缩略图/预览？

这支笔很好用。但是当我在中查看预览时，它显示一个空白预览？我的其他钢笔看起来不错，只是这一支显示不正确

为什么会这样？什么代码行导致了这种情况

可能迭代次数过多的循环会导致预览挂起

---

本帮助文章可能适用于：

“在任何以实时预览方式显示钢笔网格的页面上……这可以 如果您…意外地使用JavaScript创建了一支 需要很长时间才能运行。可能是一个无限循环，或者是一个有这么多循环的循环 它会挂起浏览器。”

您还将注意到，几秒钟后，您的其他实时预览将冻结。这种行为甚至可以在codepen.io主页上观察到，内存密集型预览会在几秒钟后冻结，而一些预览（可能内存密集度较低）会继续动画化

---

FWIW预览在冻结时，显示的是您的笔的第一帧，正如页面加载时显示的一样，这恰好是一个空白的白色屏幕。也许一个很好的折衷办法是，首先显示许多粒子的一些静态版本，以便预览有东西要显示。

这看起来像是Codepen本身的问题。我建议在这里记录一个问题->这篇帮助文章可能适用：“在任何显示笔网格作为实时预览的页面上……如果您……意外地使用JavaScript创建了一支需要很长时间才能运行的笔，这将非常有用。可能是一个无限循环，或者是一个迭代次数过多的循环，它会挂起浏览器。”@gfullam：是的！可能就是这样。这支笔能产生800个粒子。。。它挂了一点。好吧，那样的话，我会把它作为一个答案贴出来，这样你就可以结束了。

AUDIO_FILE = 'http://matthiasdv.org/cdn/tracks/robbery_song'

CODECS = [ 'mp3' ]

stats = new Stats()
stats.domElement.style.position = 'absolute'
stats.domElement.style.left = '0px'
stats.domElement.style.top = '0px'

# CONFIG
FORCE_INWARDS = 1000
RADIUS_INWARDS = 3000
FORCE_OUTWARDS = -200000
RADIUS_OUTWARDS = 400
NUM_PARTICLES = 800
PARTICLE_RADIUS_MULTIPLIER = 0.6
PARTICLE_MIN_MASS = 3.0
PARTICLE_MAX_MASS = 6.0



class Simulation

  @COLOURS = [
    '#030106'
  ]

  constructor: ->

    @physics = new Physics()
    @mouse = new Particle()
    @mouse.fixed = true
    @height = window.innerHeight
    @width = window.innerWidth

    @renderTime = 0
    @counter = 0

  setup: (full = yes) ->

    min = new Vector 0.0, 0.0
    max = new Vector @width, @height

    bounds = new EdgeBounce min, max

    @physics.integrator = new Verlet()

    center = new Vector(@width/2, @height/2)

    attraction = new Attraction center, RADIUS_INWARDS, FORCE_INWARDS
    repulsion = new Attraction center, RADIUS_OUTWARDS, 0
    collide = new Collision()

    # Dancer
    @dancer = new Dancer()
    @kick = @dancer.createKick {
      treshold: 0.2
      onKick: (mag) =>
        repulsion.strength = FORCE_OUTWARDS

        r = Random.item @physics.particles

        repulsion.target.x = r.pos.x
        repulsion.target.y = r.pos.y

      offKick: (mag) ->
        repulsion.strength = 0
    }


    max = if full then NUM_PARTICLES else 200

    for i in [0..max]
      p = new Particle (Random PARTICLE_MIN_MASS, PARTICLE_MAX_MASS)
      p.setRadius p.mass * PARTICLE_RADIUS_MULTIPLIER

      p.moveTo new Vector (Random @width), (Random @height)

      p.behaviours.push attraction
      p.behaviours.push repulsion
      p.behaviours.push bounds
      p.behaviours.push collide

      collide.pool.push p

      @physics.particles.push p

  ### Initialise the demo (override). ###
  init: (@container, @renderer = new WebGLRenderer()) ->

    # Build the scene.
    @setup @renderer.gl?

    # Give the particles random colours.
    for particle in @physics.particles
      particle.colour ?= Random.item Simulation.COLOURS

    # Add event handlers.
    document.addEventListener 'resize', @resize, false

    # Add to render output to the DOM.
    @container.appendChild @renderer.domElement

    # Prepare the renderer.
    @renderer.mouse = @mouse
    @renderer.init @physics

    # Resize for the sake of the renderer.
    do @resize

    #Dancer
    @kick.on()

    @dancer.load {
      src: AUDIO_FILE
      codecs: CODECS
    }

    @dancer.play()

  ### Handler for window resize event. ###
  resize: (event) =>

    @width = window.innerWidth
    @height = window.innerHeight
    @renderer.setSize @width, @height

  ### Update loop. ###
  step: ->

    stats.begin()

    # Step physics.
    do @physics.step

    # Render every frame for WebGL, or every 3 frames for canvas.
    @renderer.render @physics if @renderer.gl? or ++@counter % 3 is 0

    stats.end()

  ### Clean up after yourself. ###
  destroy: ->

    # Remove event handlers.
    document.removeEventListener 'resize', @resize, false

    # Remove the render output from the DOM.
    try container.removeChild @renderer.domElement
    catch error

    do @renderer.destroy
    do @physics.destroy

    @renderer = null
    @physics = null
    @mouse = null



simulation = new Simulation()
playing = false
container = $('#container')

init = ->
  playing = true
  simulation.init(container.get(0))
  update()

update = ->
  requestAnimationFrame(update)

  simulation.step() if playing && simulation

init()