问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js循环，少执行了一次，怎么回事啊，代码如下

头像
张仪ranck
    4102964
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="container"></div>


  <script>

    function createData() {

      const data = localStorage.getItem("data")

      if (data) {
        return JSON.parse(data);
      }
      let result = [];

      for (let i = 0; i < 1000; i++) {
        result.push({
          id: i,
          name: Math.random() * 1000
        })
      }
      localStorage.setItem("data", JSON.stringify(result))
      return result
    }


    function framRender(el, data, index, count) {
      if (index > data.length) {
        return
      }
      window.requestAnimationFrame(() => render(el, data, index, count))
    }

    function render(el, data, index = 0, count = 100) {


      const container = document.createDocumentFragment();
      let endIndex = index + count

      if (endIndex > data.length) {
        endIndex = data.length
      }

      console.log("time", index, endIndex)


      for (; index < endIndex; index++) {
        const div = document.createElement("div")
        const span = document.createElement("span")
        const text = document.createElement("i")
        const img = document.createElement("img")
        div.innerHTML = data[index].name
        span.innerHTML = data[index].id
        text.innerHTML = data[index].id
        container.append(div)
        div.append(span)
        div.append(text)
        div.append(img)
      }
      el.append(container)

      framRender(el, data, index + count, count)
    }

    function boot() {
      const container = document.querySelector("#container")
      const data = createData();

      console.time("render")
      render(container, data)
      console.timeEnd("render")

    }


    boot()

  </script>
</body>

</html>
    javascript
    阅读 1.8k
    1 个回答
    得票最新
    头像
    shenxiang11
      4951722

      你是想要每100个渲染一次是吧？

      for (; index < endIndex; index++) { // 这里 index 已经自增过了
                const div = document.createElement("div")
                const span = document.createElement("span")
                const text = document.createElement("i")
                const img = document.createElement("img")
                div.innerHTML = data[index].name
                span.innerHTML = "    " + endIndex
                text.innerHTML = "    " + data[index].id
                container.append(div)
                div.append(span)
                div.append(text)
                div.append(img)
            }
            el.append(container)

            framRender(el, data, index, count) // 这里 index 不用 加了
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题