javascript 分时函数分批次添加DOM节点 timeChunk

创建1000个webqq的qq好友列表, 一个好友用一个节点来表示

* timeChunk

var timeChunk = function(a, fn, sz, done) {var obj, t, len = a.length;var start = function() {for (var i = 0; i < Math.min(sz || 1, a.length); i++) {var obj = a.shift();fn.call(this, obj);}}return function() {t = setInterval(function() {// 如果全部节点都已经被创建好if (a.length === 0) {var i = clearInterval(t)typeof done === "function" && done.call(this);return i;}start();}, 200);}
}/*** Pad a string to a certain length with another string*/
function str_pad(input, pad_length, pad_string) {var i = String.valueOf()(input);var n = pad_length - i.length;if (n <= 0)return i;var s = pad_string || "0";while (n--) {i = s + i;}return i;
}// test
var ary = [];
for (var i = 1; i <= 1000; i++) {ary.push(i);
}// 每次加载8个
var renderFriendsList = timeChunk(ary, function(n) {var div = document.createElement("div");div.innerHTML = "Friend-" + str_pad(n, 4);document.body.appendChild(div);
}, 8, function() {var hint = document.createElement("p");hint.innerHTML = "好友列表加载完了";document.body.insertBefore(hint, document.body.querySelector("script"));
});renderFriendsList();

Run:

转载于:https://www.cnblogs.com/mingzhanghui/p/9408465.html

javascript 分时函数分批次添加DOM节点 timeChunk相关推荐

【JavaScript】添加DOM节点
[JavaScript]添加DOM节点原创刘甜- 最后发布于2019-03-24 19:59:39 阅读数 310 收藏展开 HTML DOM树当网页被加载时,浏览器会创建页面的文档对象模型( ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
JavaScript 技术篇-js通过xpath获取dom节点，js校验xpath唯一性
document.evaluate() 就是通过 xpath 获取 dom 节点. 返回的结果通过 .iterateNext() 可以获得 dom 对象,每次调用会少一个,当没有时就返回空. 返回匹配 ...
DOM节点创建（jQuery）
1DOM创建节点及节点属性通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况: ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
asp.net中调用javascript自定义函数的方法（包括引入JavaScript文件）总结
通常javascript代码可以与HTML标签一起直接放在前端页面中,但如果JS代码多的话一方面不利于维护,另一方面也对搜索引擎不友好,因为页面因此而变得臃肿:所以一般有良好开发习惯的程序员都会把ja ...
将HTML字符转换为DOM节点并动态添加到文档中
将HTML字符转换为DOM节点并动态添加到文档中将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

javascript 分时函数分批次添加DOM节点 timeChunk

javascript 分时函数分批次添加DOM节点 timeChunk相关推荐

最新文章

热门文章

javascript 分时函数 分批次添加DOM节点 timeChunk

javascript 分时函数 分批次添加DOM节点 timeChunk相关推荐

最新文章

热门文章

javascript 分时函数分批次添加DOM节点 timeChunk

javascript 分时函数分批次添加DOM节点 timeChunk相关推荐