做网站前端开发的必备软件,网页制作书籍推荐,在线获取颜色代码网站,福州百度seo排名在做搜索的时候#xff0c;当搜索页面只有一个输入框、没有确定按钮的时候#xff0c;只能在用户输入时请求服务端#xff0c;查询数据。这样会导致频繁的发送请求#xff0c;造成服务端压力。解决这个问题#xff0c;可以使用vue做输入节流。1、创建一个工具类#xff0…在做搜索的时候当搜索页面只有一个输入框、没有确定按钮的时候只能在用户输入时请求服务端查询数据。这样会导致频繁的发送请求造成服务端压力。解决这个问题可以使用vue做输入节流。1、创建一个工具类debounce.js/**** param func 输入完成的回调函数* param delay 延迟时间*/export function debounce(func, delay) {let timerreturn (...args) {if (timer) {clearTimeout(timer)}timer setTimeout(() {func.apply(this, args)}, delay)}}2、在搜索页面使用import {debounce} from ../utils/debounceexport default {name: HelloWorld,data () {return {search: }},created() {this.$watch(search, debounce((newQuery) {// newQuery为输入的值console.log(newQuery)}, 200))}}.text-input {display: block;width: 100%;height: 44px;border: 1px solid #d5d8df;}以上这篇vue输入节流,避免实时请求接口的实例代码就是小编分享给大家的全部内容了希望能给大家一个参考也希望大家多多支持我们。本文标题: vue输入节流,避免实时请求接口的实例代码本文地址: http://www.cppcns.com/wangluo/javascript/283386.html
