<el-input v-model="keywords"/>
import { $public, $formTools } from '@/helper'
export default {
data() {
return {
keywords: ''
}
},
watch: {
keywords () {
this.debouncedSearch()
}
},
created () {
this.debouncedSearch = $public._debounce(this.fetchPage)
},
methods: {
fetchPage (page = 1) {
let optionsObj = { limit: 10, offset: (page - 1) * 10 }
if (this.keywords.length > 0) optionsObj['search'] = this.keywords
let options = this.$formTools.getOptions('get', optionsObj)
this.$apis.manageGetProblemList(options).then(res => {
this.result = res.result
})
}
}
}
小项目不想引入lodash，所以是手写的debounce和throttle
export default {
_debounce (fn, delay) {
delay = delay || 600
let timer
return function () {
let ctx = this
let args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
timer = null
fn.apply(ctx, args)
}, delay)
}
},
_throttle (fn, interval) {
let last
let timer
interval = interval || 600
return function () {
let ctx = this
let args = arguments
let now = new Date()
if (last && now - last < interval) {
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(ctx, args)
}, interval)
} else {
last = now
fn.apply(ctx, args)
}
}
}
}
