一、节流
概念:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。
类似于技能CD。
应用:点击按钮,轮播图点击左右箭头。
插件lodash.js,它里面封装了函数的防抖与节流业务。
计数器:0
// 获取元素let span = document.querySelector('span')let btn = document.querySelector('button')let count = 0let timer = null// 控制节流阀是否开启或关闭let flag = true// 需求:在一秒以内,不管点击按钮多少次,计数器数值只能+1btn.onclick = function () { if (flag) { flag = false timer = setTimeout(() => { count++ span.innerHTML = count flag = true }, 1000) }}
二、防抖
概念:前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行一次。
类似于LOL回城被打断。
应用:输入框搜索。
插件lodash.js,它里面封装了函数的防抖与节流业务。
data () { return { timer: null }},methods: { inputFn () { if (this.timer) {clearTimeout(this.timer) } this.timer = setTimeout(() => {// 发送网络请求 }, 3000) }}