一、搜索框

1、中文输入法

  我们在进行中文输入法时，拼音也会被 input 事件监听到

问题演示

• 代码

<input type="text" />
<script>
  const inputElemt = document.querySelector('input')

  function search() {
    console.log('搜索：' + inputElemt.value)
  }
  inputElemt.addEventListener('input', function () {
    search()
  })
</script>

• 结果

搜索：l
搜索：li
搜索：lis
搜索：lish
搜索：lishi
搜索：历史

  对于上述问题，我们可以使用 compositionstart (opens new window) 事件解决：

const inputElemt = document.querySelector('input')
let isCompose = false

function search() {
  console.log('搜索：' + inputElemt.value)
}
inputElemt.addEventListener('input', function () {
  if (isCompose) return

  search()
})

inputElemt.addEventListener('compositionstart', function () {
  isCompose = true
  console.log('--- 开始输入中文拼音 ---')
  // search()
})

inputElemt.addEventListener('compositionend', function () {
  console.log('--- 开始输入中文拼音 ---')
  isCompose = false

  search()
})

2、搜索请求防抖

  防抖：

王者荣耀英雄回城效果

  无论是防抖还是节流，都是通过对函数调用次数的限制，节省资源。

function debounce(fn, wait) {
  let timeout

  return function () {
    let context = this
    let args = arguments

    if (timeout) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(function () {
      fn.apply(context, args)
    }, wait)
  }
}

// 注意防抖包裹的函数
inputElemt.addEventListener(
  'input',
  debounce(function () {
    if (isCompose) return

    search()
  }, 300)
)

二、长列表

3、虚拟列表技术

  这个词，第一次是在 mallchat 聊天室的中看到的一个现实的需求。

需求分析

  常规的情况下，我们使用 节流就可以了。

王者荣耀英雄平 a 效果

  但是，如果存在列表不断刷新的场景呢？那么列表的长度会变得不可控制，DOM 的消耗也会变得很大。

  当然，把虚拟列表技术放在这里有点牵强了 😂。

4、长列表优化

略