jquery – 选择大型项目的性能

前端之家收集整理的这篇文章主要介绍了jquery – 选择大型项目的性能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用带有twitter bootstrap的select2 jquery插件。对于较小数量的项目可以正常工作。但是当这个名单是巨大的(超过1500个项目)它真的减慢了。在IE中最慢

正常下拉列表的工作速度非常快,超过1500项。这种情况有什么解决方法吗?

解决方法

你可以使这个工作很好,即使在IE8中,也有分歧的建议,

码:

`

// Function to shuffle the demo data
var shuffle = function (str) {
        return str.split('').sort(function () {
            return 0.5 - Math.random();
        }).join('');
    };
    $(function () {
        $('#e24').select2({
        // For demonstration purposes we first make
        // a huge array of demo data (20 000 items)
        // Heads up; for the _.map and _.filter function i use underscore (actually lo-dash) here
            data             : _.map(_.range(1,20000),function (i) {
                return {
                    id  : i,text: shuffle('te ststr ing to shuffle') + ' ' + i
                };
            }),// NOT NEEDED: These are just css for the demo data
            dropdownCssClass : 'capitalize',containerCssClass: 'capitalize',// configure as multiple select
            multiple         : true,// text for loading more results
            formatLoadMore   : 'Loading more...',query            : function (q) {
            // pageSize is number of results to show in dropdown
                var pageSize,results;
                    pageSize = 20;
                    results  = _.filter(this.data,function (e) {
                        return (q.term === "" || e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
                 });
                q.callback({
                    results: results.slice((q.page - 1) * pageSize,q.page * pageSize),// retrieve more when user hits bottom
                    more   : results.length >= q.page * pageSize
                });
            }
        });
    });`

这里有20000个项目的工作示例:
http://embed.plnkr.co/db8SXs/preview

plnkr embed不支持IE8,所以尝试使用这个链接的IE8:
http://run.plnkr.co/plunks/db8SXs/

猜你在找的jQuery相关文章