Question

我有一个点击处理程序，我在一大堆元素中显示接下来的15个元素，这显然需要时间：它明显滞后，在此期间用户不知道发生了什么。

我目前正在研究解决这个问题的两种方法：

确保我们更有效地“取消隐藏”接下来的15个元素（参见related question）。
确保我们展示一个微调器或类似的东西，以便用户知道“正在发生的事情”

现在问题似乎是，如果我有一个点击处理程序，如下所示：

  $('#facets-list').on 'click', 'a[data-show-next-15]', (event) ->
    event.preventDefault()
    $(this).find('span.spinner').show()
    $(this).parent().parent().find('li.hidden').slice(0, 15).removeClass('hidden')
    $(this).find('span.spinner').hide()

html中的所有更改只有在处理程序完成后才可见。因此，旋转器的显示和隐藏从未完成。

有没有办法以某种方式强制重绘？虽然可能效率不高，但用户会更加清楚。

Answer 1

感谢@Paolo_Bergantino提出的建议，我提出了以下建议：

  $('#facets-list').on 'click', 'a[data-show-next-15]', (event) ->
    event.preventDefault()
    $(this).find('span.spinner').show()
    self = $(this)
    setTimeout((() ->
      self.parent().parent().find('li.hidden:lt(15)').attr('class', '')
      setTimeout((() -> $('span.spinner').hide()), 2)
    ), 2)

旋转器不旋转，但现在更清楚了一些事情：）

jquery在单击处理程序中强制重绘

1 个答案: