鍍金池/ 問答/網絡安全  HTML/ element-ui使用el-select通過ajax請求數據并渲染。每次inp

element-ui使用el-select通過ajax請求數據并渲染。每次input事件都會去請求接口，導致請求太頻繁

                                    <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>

clipboard.png

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

回答
編輯回答
笑忘初

remote-method 在輸入值發(fā)生變化時調用，參數為當前輸入。
change 是在選中后才觸發(fā)，
在 遠程搜索等類似的聯想功能，我覺得 還是避免不了頻繁調用接口，
這里可以使用 函數防抖 試試 高級函數技巧-函數防抖與節(jié)流[]

2018年2月20日 07:22
編輯回答
孤影

大概這樣寫的

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)
2018年4月9日 06:33
編輯回答
心悲涼

就像 @不可能的是 說的一樣，你可以在remote-method里簡單的設置一個超時，即，并不是一改變就去調用接口，而是有一個debounce，詳細可以看他給的鏈接。

2018年4月10日 18:57