jQuery 2.1.0 |递增显示元素

Question

我需要在可滚动的父项中从上到下逐渐显示多行按钮 div。这些按钮行是使用应用于转换为 html 的文本字符串的替换方法创建的。由于我可以创建和显示 500 多行按钮，文本到 html 的转换可能需要几秒钟或更长时间，这会在转换期间冻结 UI。下面的代码使用 setInterval 来解锁 UI 并提供一种很酷的方式 "animating" 按钮行的逐渐显示。问题是，目前，整组行在每个 setInterval 重复，这不是我想要的，我不知道下一步该做什么。我需要每个 individual 行递增显示而不重复，从上到下，按照字符串提供的顺序，直到满足数组的长度。可滚动父级 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 循环而不是替换函数修改了您的代码来解决问题。

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>');
}

然后使用间隔函数遍历元素以获得相同的 "loading" 效果：

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

jQuery 2.1.0 |递增显示元素

jQuery 2.1.0 | Display elements incrementally

javascript

arrays

sorting

jquery

lazy-loading