登录  /  注册
博主信息
博文 47
粉丝 0
评论 2
访问量 99544
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Vue防抖与节流的最佳解决方案
拾一枝樱花的博客
原创
1340人浏览过

什么是防抖节流

防抖:防止重复点击触发事件防抖
  1. 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈
  2. 典型应用就是防止用户多次重复点击请求数据。
  3. 代码实现要点:设置一个定时器,通过闭包,抓住定时器变量,控制定时器的添加和清除
  4. 直接上代码
  5. function debounce(fn, time) {
  6. let _arguments = arguments
  7. let timeout = null
  8. return function () {
  9. if (timeout) {
  10. clearTimeout(timeout)
  11. }
  12. timeout = setTimeout(() => {
  13. fn.call(this, _arguments)
  14. }, time);
  15. }
  16. }
节流:指定时间间隔内只会执行一次任务
  1. 大家都玩过FPS游戏吧(没玩过???打枪知道了吧!)道具的射速是一定的,不会因为你点击鼠标的速度加快而增加。
  2. 代码实现要点:通过一个布尔变量作为状态,判断代码是否需要执行
  3. 直接上代码
  4. function throttle(fn, time) {
  5. let _arguments = arguments
  6. let canRun = true
  7. return function () {
  8. if (!canRun) return
  9. canRun = false
  10. setTimeout(() => {
  11. fn.call(this, _arguments)
  12. canRun = true
  13. }, time);
  14. }
  15. }
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学