输入框模糊搜索时的@composition事件_compositionend 获取值当时不像内容中输入-CSDN博客

本文介绍了如何通过添加@compositionstart和@compositionend事件来优化输入框的实时提示功能，避免每次输入字母都触发接口请求，从而减轻服务器压力并提高应用性能。利用节流函数配合标志变量，确保在输入完成后才执行逻辑，同时提供了节流函数的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当在输入框中输入内容，要求能实现实时提示时，先是给输入框添加了@input事件，监控他内容的变化
但是每输入一个英文字母都会触发一次，这对接口会造成很大的压力性能会减弱。

解决办法：
添加@compositionstart，@compositionend事件，他们能实现开始输入时不触发，等到输入完成后触发input事件，在data中设置一个标志，初始值设为false

	<input
		@input="search()"
		@compositionstart="flag = false"
		@compositionend="flag = true"
	/>
	//在触发input事件的时候搭配着节流函数一起使用，在设定的时间段内执行，不可多次触发，提高性能
	search：throttle(function(e){
		if(this.flag) {
			//执行相应的逻辑
		}
	},300)
	
	//提供一个节流函数
	export const throttle = (fn, delay, mustRunDelay) => {
    let timer = null
    let t_start
    return function() {
        const context = this
        const args = arguments
        let t_curr = +new Date()

        clearTimeout(timer)
        if (!t_start) {
            t_start = t_curr
        }
        if (t_curr - t_start >= mustRunDelay) {
            fn.apply(context, args)
            t_start = t_curr
        } else {
            timer = setTimeout(function() {
                fn.apply(context, args)
            }, delay)
        }
    }
};