Question

我需要在可滚动的父div中从上到下逐步显示按钮行。这些按钮行是使用应用于转换为html的文本字符串的替换方法创建的。由于我可以创建和显示500多行按钮，因此文本到html的转换可能需要几秒或更长时间，这会在转换期间冻结UI。下面的代码使用setInterval来解锁UI，并为按钮行的逐渐显示提供了一种很酷的“动画”方式。问题是，目前，整个行集在每个setInterval重复，这不是我想要的，我无法弄清楚接下来该做什么。我需要逐行显示每个单独的行，而不是按照字符串提供的顺序从上到下重复，直到满足数组的长度。可scrolable父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>');
}

然后用你的间隔函数循环遍历元素以获得相同的＆＃34; loading＆＃34;效果：

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 |逐步显示元素

1 个答案: