JS每点击一次添加多少条数据

　　很久不写文档，平时只写日记，所以对这个有点生疏，如果写的不好别介意。

　　今天闲的蛋疼，于是要写写白天的东西，并且以后也会一直更新(一直写)下去。

　　时间太仓促了，这几个月，今天算最晚的一次凌晨1点，吃不消的路过。

　　进入正题！

　　这是一个每次点击添加指定数据的插件，基于jQuery封装，调用方法名batchLoading，简单到一键操作，不用每次都来一次了，爽滋滋。

　　实现方法如下：

　　HTML

<div class="default-batch-box batch-box">
    <ul class="default-list-box">
    ul>
    <div class="default-batch-unlock">
        <span>span>
    div>
div>

 

　　JAVASCRIPT

 　　封装的方法 batchLoading.js

 1 (function  (g) {
 2     var _plus = 1
 3     function addBatchTemplate (data, start, stop, everyTimes, fallBack, complate) {
 4         var str = ''
 5         if ((stop-everyTimes) <= data.length) {
 6             for (var i = start; i < stop; i++) {
 7                 if (data[i]){
 8                     var tiny = data[i]
 9                     str += fallBack(tiny)
10                 }
11             }
12         }
13         else {
14             complate()
15         }
16         return str
17     }
18 
19     function implementionAddBatchTemplate (option, start, stop, everyTimes, fallBack, complate) {
20         $(option.node[0]).append(addBatchTemplate(option.data, start, stop, everyTimes, fallBack, complate))
21     }
22 
23     function excuteBatchLoadData (option, everyTimes, fallBack, complate) {
24         var start = _plus
25         implementionAddBatchTemplate(option, start * everyTimes, ++_plus * everyTimes, everyTimes, fallBack, complate)
26     }
27 
28     function handleEventLoadData (option, everyTimes, fallBack, complate) {
29         $(option.node[1]).unbind('click').on('click', function  (e) {
30             excuteBatchLoadData(option, everyTimes, fallBack, complate)
31         })
32     }
33 
34     function batchLoading (params) {
35         implementionAddBatchTemplate(
36             {
37                 data: params.data,
38                 node: params.node
39             }, 
40             params.default, 
41             params.everyTime, 
42             params.everyTime, 
43             params.method,
44             params.complate
45         )
46         handleEventLoadData(
47             {
48                 data: params.data,
49                 node: params.node
50             }, 
51             params.everyTime, 
52             params.method,
53             params.complate
54         )
55     }
56 
57     g.batchLoading = batchLoading
58 })(this ? window : global)

View Code

 

　　上效果图，目前看到的是每点击一次加4条数据，默认从第二条数据开始，完成之后点击调用complate方法。

　　演示DEMO(从0开始)点击加载数据

　　git代码：https://github.com/ZWLTZ/batchLoading/tree/master

 

转载于:https://www.cnblogs.com/hao5599/p/8025821.html