背景：
最近在做管理后臺(tái)的項(xiàng)目時(shí)细办，遇到一個(gè)問(wèn)題：在input輸入過(guò)程中實(shí)時(shí)搜索况既，如果輸入英文實(shí)時(shí)搜索時(shí)沒(méi)有問(wèn)題的，但是在拼寫(xiě)輸入時(shí)悬蔽，拼寫(xiě)未完成就已經(jīng)發(fā)送了請(qǐng)求，比較浪費(fèi)接口的性能捉兴。
解決方案：
當(dāng)用戶(hù)使用拼音輸入法開(kāi)始輸入漢字時(shí)蝎困，會(huì)觸發(fā)compositionstart，當(dāng)拼寫(xiě)完成時(shí)會(huì)觸發(fā)compositionend事件倍啥。利用這兩個(gè)事件對(duì)拼寫(xiě)輸入進(jìn)行處理禾乘。
代碼實(shí)現(xiàn)：
<template>
<div>
<input @input="handleInput" @compositionstart="compositionstart" @compositionend="compositionend" :value="message" ref="inputRef"/>
</div>
</template>
<script>
export default {
data () {
return {
message: ''
}
},
methods: {
handleInput (e) {
this.message = e.target.value
setTimeout(() => {
if (!this.flag) {
this.search(this.message)
}
}, 0)
},
compositionstart () {
this.flag = true
},
compositionend () {
this.flag = false
},
search () {
// TODO: 進(jìn)行接口請(qǐng)求
console.log('search', this.message)
}
}
}
</script>
代碼答疑：
1、在@input時(shí)虽缕，判斷this.flag是否為假值,如果為假值始藕，正常請(qǐng)求接口，拼寫(xiě)開(kāi)始時(shí)氮趋，在compositionstart時(shí)將其置為true伍派，在拼寫(xiě)過(guò)程中，不再進(jìn)行接口請(qǐng)求剩胁，直到拼寫(xiě)完成觸發(fā)compositionend诉植，將this.flag置為false，@input再次正常請(qǐng)求接口昵观。
2晾腔、@input會(huì)先于compositionstart執(zhí)行，此時(shí)的this.flag尚未被置為true啊犬，所以需要使用setTimeout將其優(yōu)先級(jí)滯后灼擂。
