<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>函数节流与防抖</title> </head> <body> <button id="handle">测试不做函数节流/防抖</button> <button id="throttle">测试函数节流</button> <button id="debounce">测试函数防抖</button> <!-- 1. 事件频繁触发可能造成的问题? 1). 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题 2). 如果向后台发送请求，频繁触发，对服务器造成不必要的压力 2. 如何限制事件处理函数频繁调用 1). 函数节流 2). 函数防抖 3. 函数节流(throttle) 1). 理解: 在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行时间后才会执行第二次 适合多次事件按时间做平均分配触发 2). 场景： 窗口调整（resize） 页面滚动（scroll） DOM 元素的拖拽功能实现（mousemove） 抢购疯狂点击（click） 4. 函数防抖(debounce) 1). 理解: 在函数需要频繁触发时: 在规定时间内，只让最后一次生效，前面的不生效。 适合多次事件一次响应的情况 2). 场景： 输入框实时搜索联想（keyup/input） --> <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js"></script> <script> /* 处理点击事件的回调函数 */ function handleClick(event) { // 处理事件的回调 console.log('处理点击事件', this, event) } // document.getElementById('handle').onclick = handleClick /* _.throttle(handleFn, delay, options)返回一个新函数, 就是绑定事件监听的回调函数(它是高频调用) handleFn: 真正处理事件的回调函数, 由throttle()返回的函数内部间隔指定的dalay时间后调用(少量调用) _.debounce()语法一样 // */ // 每隔2s触发一次handleClick，节流操作 document.getElementById('throttle').onclick = _.throttle(handleClick, 2000) //执行最后一次的handleClick，防抖操作 document.getElementById('debounce').onclick = _.debounce(handleClick, 2000) </script> </body> </html>
vue方式
1. 引入lodash,脚手架中已经安装了lodash，
// import _ from 'lodash' //引入整体打包体积比较大
import throttle from "lodash/throttle"; //只是引入节流功能
对li标签添加属性
@mouseenter="moveIn(index)"，移入效果，采用节流方式
methods: { moveIn: throttle( function(index) { console.log(index); this.currentIndex = index; }, 50, { trailing: false } ), //{ 'trailing': true } 拖延触发，节流操作函数触发如果是true，那么是在规定时间结束之后触发 //{ 'trailing': false } 不拖延触发，节流操作函数触发如果是false，那么是在规定时间开始就触发 },
