element-ui使用el-select通过ajax请求数据并渲染。每次input事件都会去请求接口，导致请求太频繁

Question

                                    <el-select v-model="relateVal" multiple filterable remote reserve-keyword :multiple-limit="10" placeholder="请输入电影名称" :remote-method="getRelatedMovie" ref="relateMovie">
                                        <el-option v-for="item in relates" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>

怎么才能在change事件里再去调用接口呢？

Answer 1

remote-method 在输入值发生变化时调用，参数为当前输入。
change 是在选中后才触发，
在 远程搜索等类似的联想功能，我觉得 还是避免不了频繁调用接口，
这里可以使用 函数防抖 试试 高级函数技巧-函数防抖与节流[]

Answer 2

就像 @不可能的是 说的一样，你可以在remote-method里简单的设置一个超时，即，并不是一改变就去调用接口，而是有一个debounce，详细可以看他给的链接。

Answer 3

大概这样写的

function throttle(fn, time) {
    var timer = null;
    time =  time|| 1000;
    return function () {
        clearTimeout(timer);
        var arg = arguments;
        timer = setTimeout(function () {
            fn.apply(this, arg);
        }, time)
    }
}

这样调

getRelatedMovie:throttle(function(value){
    console.log(value)
},2000)