vue中使用防抖函数

<input v-model="searchText" @input='search' placeholder="搜索电影" class="search-placeholder">

在公共的js文件utils.js中添加防抖函数如下:

export default {
    debounce(fn, delay = 300) {   //默认300毫秒
        var timer;
        return function() {
            var args = arguments;
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, args);   // this 指向vue
            }, delay);
        };
    }
}

调用:

import utils from "@/js/utils";

search: utils.debounce(function() {
        let v = this;
        let serchURL = `/movie/search?q=${v.searchText}&start=0&count=10`;
        v.$axios
         .get(serchURL)
         .then(response => {
              v.processSearchData(response.data);
         })
         .catch(error => {
             console.log(error)
         })
         .finally()
     }),

猜你喜欢

转载自blog.csdn.net/qq_24331363/article/details/88109545