我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是
根据防抖节流而实现的,至于用防抖还是节流根据自己需求。

<template>
<input type="text" v-model.trim="sse">
</template>
<script>
const delay = (function () {
let timer = 0
return function (callback, ms) {
clearTimeout(timer)
timer = setTimeout(callback, ms)
}
})()
export default {
name : 'search',
watch : {
sse () {
delay(() => {
this.search()
}, 500)
},
methods :{
search () {
this.$axios
.get([url])
.then(response => {
// success
})
.catch(error => {
// error
alert('失败!')
})
}
}
}
} </script>
 

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119809210

关于vue项目中搜索节流的实现的更多相关文章

  1. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  2. 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  3. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  4. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  5. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  6. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  7. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  8. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  9. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

随机推荐

  1. 在定义C++, C通用接口函数时让C++接口支持默认参数

    在SOUI4的开发中,所有SOUI核心对象都采用了一种类似COM接口的技术来导出接口. 这所以采用这种方案,主要目的是为了让SOUI4支持C语言调用,扩展SOUI的使用场景. 众所周知,C++函数的参 ...

  2. partOne讲解思路

    讲解思路   分解:把一个复杂的大问题,拆解成更可执行.更好理解的小步骤. 模式识别:找出相似模式,高效解决细分问题. 抽象:聚焦最重要的信息,忽视无用细节. 算法:设计一步一步的解决路径,解决整个问 ...

  3. MySQL 视图简介

    概述 数据库中关于数据的查询有时非常复杂,例如表连接.子查询等,这种查询编写难度大,很容易出错.另外,在具体操作表时,有时候要求只能操作部分字段. 为了提高复杂 SQL 语句的复用性和表的操作的安全性 ...

  4. Java数组-2022年4月17日

    目录 数组 数组Array 数组的常见异常 数组的遍历 数组的扩容 数组类型的返回值 可变长数组 排序算法 二维数组 测试代码 数组 数组Array ArrayList概念:一个连续的空间,存储多个相 ...

  5. Java之IO流技术详解

    何为IO? 首先,我们看看百度给出的解释. I/O输入/输出(Input/Output),分为IO设备和IO接口两个部分. i是写入,Input的首字母.o是输出,Output的首字母. IO 也称为 ...

  6. 条件表达式和switch语句

    一,条件表达式相当于(相当于if-else) 1.条件表达式 ? : 由条件运算符组成条件表达式的一般情况为: 表达式1?表达式2:表达式3: 求值规则:如果表达式的值为真,则以表达式2的值作为条件的 ...

  7. Spring mvc 使用@RequestBody 500错误

    今天在使用@RequestBody的时候,遇到一个http500错误,记录一下 让我们来看看我是怎么样错的,贴上代码 @PostMapping("/User") public Us ...

  8. 1.4 类UNIX系统是什么鬼?

    上节<UNIX和Linux的区别>中讲到了 UNIX 系统的历史,UNIX 是操作系统的开山鼻祖,是操作系统的发源地,后来的 Windows 和 Linux 都参考了 UNIX. 有人说, ...

  9. SSH 证书登录教程

    开源Linux 专注分享开源技术知识 SSH 是服务器登录工具,提供密码登录和密钥登录. 但是,SSH 还有第三种登录方法,那就是证书登录.很多情况下,它是更合理.更安全的登录方法,本文就介绍这种登录 ...

  10. css自定义省略实例2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...