jQuery 2.1.0 |增量显示元素

Question

我需要在可滚动的父 div 中从上到下递增地显示按钮行。这些按钮行是使用应用于转换为 html 的文本字符串的替换方法创建的。由于我可以创建和显示 500 多行按钮，因此文本到 html 的转换可能需要几秒钟或更长时间，这会在转换过程中冻结 UI。下面的代码使用 setInterval 解锁 UI 并提供一种很酷的方式来“动画”按钮行的逐渐显示。问题是，目前，整个行集在每个 setInterval 处重复，这不是我想要的，我不知道下一步该做什么。我需要以字符串提供的顺序从上到下递增地显示每一行而不重复，直到满足数组的长度。可滚动的父 div 是 300px 的固定高度。也许延迟加载方法会更好？任何解决此问题的帮助表示赞赏。

DEMO fiddle

var placeholder = $('#placeholder');

placeholder.html(placeholdertohtml(placeholder));

function placeholdertohtml(placeholder){

placeholder.html(placeholder.text().replace(/((\d{2},\d{2}))/g, function(match, number){

var blocks = placeholder.text().split(',').length;

console.log(blocks);

var el = number.substr(0,5).split(',');

var prefix = el[0];
var suffix = el[1];

var t = setInterval(function(){
    if (blocks) {  
        var content = '<p><button>'+prefix+'</button><button>'+suffix+'</button></p>';

$('#placeholder').append(content);

        blocks--;

    } else {
        clearInterval(t);
    }

}, 100);

}));

}

Answer 1

因此，我使用 for 循环而不是 replace 函数重新编写了您的代码来解决问题。

Here is a working codepen

我基本上做了一个循环，构建了一个要添加的 html 数组：

var numberOfPairs = placeholder.text().match(/((\d{2},\d{2}))/g).length;
var countdown = numberOfPairs;
var string = placeholder.text();
var elements = [];
for(var i = 0; i < numberOfPairs; i++) {
  var pair = string.substring(5 * i + 1, (5 * i) + 6).split(',');
  var prefix = pair[0];
  var suffix = pair[1];
  elements.push('<p><button>'+prefix+'</button><button>'+suffix+'</button></p>');
}

然后用你的区间函数循环遍历元素以获得相同的“加载”效果：

var elementIndex = countdown;
var t = setInterval(function(){
  if (countdown >= 0) {
    $('#placeholder').append(elements[(countdown - elementIndex) * -1]);
    countdown--;
  } else {
  clearInterval(t);
}
}, 100);