在表单中,输入框的输入一般伴随着接口请求,为了避免服务端压力过大,可进行防抖处理
在vue中可采用自定义指令的方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /*** * 防抖 单位时间只触发最后一次 * @param {?Number|300} type - 当前元素类型 * @param {Function} fn - 执行事件 * @param {?String|"click"} event - 事件类型 例:"keydown" * @param {?Number|300} time - 间隔时间 * @param {Array} binding.value - [fn,event,time] * 例:<el-input v-debounce="[queryList,`keydown`,300]" /> * 也可简写成:<el-input v-debounce="[queryList]" /> * queryList 函数中 可以拿到输入的值,进行接口请求 * 例:async queryList(Val) { await xxx(val) } */ Vue.directive('debounce', { inserted: function (el, binding) { let [type = "input", fn, event = "keydown", time = 300] = binding.value const targetEl = el.getElementsByTagName(type)[0]; let timer targetEl.addEventListener(event, () => { timer && clearTimeout(timer) timer = setTimeout(() => fn(targetEl?.value), time) }) } }); |