vue中使用防抖函数

在公共的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";

export default {

    methods: {
        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()
         })
    }

}

 

你可能感兴趣的:(vue中使用防抖函数)