# 一、搜索框

# 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、长列表优化

更新于 : 7/8/2024, 10:21:14 AM