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

<script>
var data = [1,2,3,4,'a','b','c','d',1,2,3,4,5,6,9,]
batchLoading({
    node: ['.default-list-box','.default-batch-unlock'], // 第一个节点为添加数据class 第二个为点击事件class
    data: data,    // 总数据
    default: 2, // 默认从第几条数据开始
    everyTime: 4, // 每次添加多少条数据
    method: function (data) { // 循环数据
        var str = ''
        var tiny = data
        str += '<li>'
        str += '<span>' + tiny +'</span>'
        str += '<span>上海</span>'
        str += '<span>机械业</span>'
        str += '<span>加载器</span>'
        str += '<span>去参团</span>'
        str += '</li>'
        return str
    },
    complate: function  () {
        alert('加载结束')
    }
})
</script>

 　　封装的方法 batchLoading.js

(function  (g) {
    var _plus = 1
    function addBatchTemplate (data, start, stop, everyTimes, fallBack, complate) {
        var str = ''
        if ((stop-everyTimes) <= data.length) {
            for (var i = start; i < stop; i++) {
                if (data[i]){
                    var tiny = data[i]
                    str += fallBack(tiny)
                }
            }
        }
        else {
            complate()
        }
        return str
    }

    function implementionAddBatchTemplate (option, start, stop, everyTimes, fallBack, complate) {
        $(option.node[0]).append(addBatchTemplate(option.data, start, stop, everyTimes, fallBack, complate))
    }

    function excuteBatchLoadData (option, everyTimes, fallBack, complate) {
        var start = _plus
        implementionAddBatchTemplate(option, start * everyTimes, ++_plus * everyTimes, everyTimes, fallBack, complate)
    }

    function handleEventLoadData (option, everyTimes, fallBack, complate) {
        $(option.node[1]).unbind('click').on('click', function  (e) {
            excuteBatchLoadData(option, everyTimes, fallBack, complate)
        })
    }

    function batchLoading (params) {
        implementionAddBatchTemplate(
            {
                data: params.data,
                node: params.node
            }, 
            params.default, 
            params.everyTime, 
            params.everyTime, 
            params.method,
            params.complate
        )
        handleEventLoadData(
            {
                data: params.data,
                node: params.node
            }, 
            params.everyTime, 
            params.method,
            params.complate
        )
    }

    g.batchLoading = batchLoading
})(this ? window : global)

 

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

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

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