utils.js文件 direction.js文件 函数不传参打印为： 函数传参： 在vue中使用： 传参使用方式： 如果不这么写的话，会返回函数执行完之后的返回值。 不传参使用方式： ...

故事背景： 项目有个需求是输入框在输入的时候进行搜索，展示下拉数据，但是没必要输入一个字都进行搜索，所以想到了在输入结束200毫秒后再进行搜索，从而引出来了 js的节流(throttle)，防抖（debounce），在网上想找个现成的用下，但是好多都不对，于是就自己搞了。 先看看概念 函数防 ...

防抖 使用场景：如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，就会消耗很大的服务器资源。如果每次用户停止输入后，延迟超过一定时间时，才去请求服务器的话 ...

防抖、节流的概念是用户高频率的操作某一事件导致的性能问题。 防抖： 定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。 节流： 在规定的时间内执行方法。 应用场景： 用户拖动滚动条可以用 节流 方式实现。 input输入关键字实时发送请求 ...

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 使用场景：频繁触发、输入框搜索 因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。 实例 节流：高频事件触发，但在n秒内 ...

1、在methods中定义节流函数： 2、在data中定义绑定需要节流的函数： ...

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。 一、函数防抖 定义在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。 实现原理 ...

Vue中防抖与节流的使用 场景：点击按钮下载资源，防止服务器压力过大，前端使用节流或者防抖； 一、防抖与节流介绍 1、防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间； 2、节流(thorttle)：高频事件触发，但在 n ...