数组分块思路 记一笔

请叫我海龟先生 等级 739 0 0
标签: 数组

当面临某些不需要考虑执行顺序同步的且耗时较长的任务,可以考虑分块思路

js 代码

        const ul = document.getElementById("ul")
        //创建测试数组
        function cerateArr(size) {
            let arr = []
            for (let i = size; i > 0; i--) {
                arr.push(i)
            }
            return arr
        }
        // 渲染函数
        function render(arr) {
            for (let i = 0; i < arr.length; i++) {
                let li = document.createElement('li')
                li.innerHTML = `这是第${arr[i]}个`
                ul.appendChild(li)
            }
        }
        // 分块处理函数 案例只考虑整数数据
        function chunk(array, process, context) {
            let item = array.slice(0,10)
            process.call(context, item)
            if(array.length > 0) {
                setTimeout(() => {
                    chunk(array.slice(item.length,array.length),process,context)
                },100)
            }
        }
        let arr = cerateArr(580)
        chunk(arr,render)
        // 思路将数组分割再结合定时器去执行任务

效果

数组分块思路 记一笔

收藏
评论区

相关推荐

写C端,如何优雅的处理多个弹框的显示?(附带源码)
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
React系列-自定义Hooks很简单(下)
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
性能优化之防抖和节流
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
JavaScript进阶之new的实现
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
Redux系列之分析中间件原理(附经验分享)
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
JavaScript进阶之实现拖拽(上)
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
React系列-轻松学会Hooks(中)
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
仿Windows下记事本小程序
在 Windows 操作系统中,记事本是一个小的应用程序,采用一个简单的文本编辑器进行文字信息的记录和存储。请仿照 Windows 的记事本,开发一个属于自己的记事本(Notepad)功能记事本的应该具备的功能,基本要求如下:(1) 菜单栏中包含文件、编辑、查看和帮助菜单,具体如下图所示。(2) 文件菜单中具有新建、打开、保存、另存为、打印和退出功能,具体如
盘点HTML中常见的ul ol 列表和常见的列表标记图标
大家好,我是皮皮。 一、概念CSS列表属性作用如下:设置不同的列表项标记为有序列表。设置不同的列表项标记为无序列表。设置列表项标记为图像。 二、什么是种类型的列表?种类型的列表: ul无序列表 列表项标记用特殊图形(如小黑点、小方框等) ol有序列表 列表项的标记有数字或字母。使用CSS,可以列出进一步的样式,并可用图像作列表项标记。 三、常见的
C# 事件的使用案例
事件的使用案列 一、案例背景 在写一个询价报价的Winfrom程序时,程序首页FORM(form名为FrmEnquiry)显示的询价记录和报价记录, 询价记录如下图:  ![](https://oscimg.oschina.net/oscnet/616cadb9daa5918cf0c032ae4399787956f.png) 在用户点击新增询价记录
Java分布式锁看这篇就够了
\### 什么是锁? ========== * 在单进程的系统中,当存在多个线程可以同时改变某个变量(可变共享变量)时,就需要对变量或代码块做同步,使其在修改这种变量时能够线性执行消除并发修改变量。 * 而同步的本质是通过锁来实现的。为了实现多个线程在一个时刻同一个代码块只能有一个线程可执行,那么需要在某个地方做个标记,这个标记必须每个线程都能看到
oracle笔记——杂记篇
一、创建表的知识 -------- ###     1、创建表 _\--__用户信息_ create table tb\_operator( Id Int primary key,_\--__自动编号_ Name Varchar2(12),_\--__姓名_ Sex Varchar2(2),_\--__性别_ Age int,_\--_
IM移动端怎么搜索本地聊天记录
![](https://oscimg.oschina.net/oscnet/a26c4beb353d57e0a235a4166187c17c430.jpg) IM软件客户端需要支持本地存储的聊天记录的搜索功能,对于这类非结构化数据(全文数据)一般有两种检索方法。 **一、思路** 1、顺序扫描法 比如要找内容包含某一个字符串的聊天
Redis的锁
分布式与集群 ====== 什么是锁 ==== * 在单进程的系统中,当存在多个线程可以同时改变某个变量(可变共享变量)时,就需要对变量或代码块做同步,使其在修改这种变量时能够线性执行消除并发修改变量。 * 而同步的本质是通过锁来实现的。为了实现多个线程在一个时刻同一个代码块只能有一个线程可执行,那么需要在某个地方做个标记,这个标记必须
sql之left join、right join、inner join的区别
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录 inner join(等值连接) 只返回两个表中联结字段相等的行 举例如下: \--------------------------------------------