鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ element-ui使用el-select通過(guò)ajax請(qǐng)求數(shù)據(jù)并渲染。每次inp

element-ui使用el-select通過(guò)ajax請(qǐng)求數(shù)據(jù)并渲染。每次input事件都會(huì)去請(qǐng)求接口，導(dǎo)致請(qǐng)求太頻繁

                                    <el-select v-model="relateVal" multiple filterable remote reserve-keyword :multiple-limit="10" placeholder="請(qǐng)輸入電影名稱" :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事件里再去調(diào)用接口呢？

回答
編輯回答
笑忘初

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

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

大概這樣寫(xiě)的

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

這樣調(diào)

getRelatedMovie:throttle(function(value){
    console.log(value)
},2000)
2018年4月9日 06:33
編輯回答
心悲涼

就像 @不可能的是 說(shuō)的一樣，你可以在remote-method里簡(jiǎn)單的設(shè)置一個(gè)超時(shí)，即，并不是一改變就去調(diào)用接口，而是有一個(gè)debounce，詳細(xì)可以看他給的鏈接。

2018年4月10日 18:57