性能优化之防抖

这篇具有很好参考价值的文章主要介绍了性能优化之防抖。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

方法1:利用lodash库提供的防抖来处理

方法2:手写一个防抖函数来处理

需求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字才会变化+1

方法一:利用lodash库实现防抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
              width: 500px;
              height: 500px;
              background-color: #ccc;
              color: #fff;
              text-align: center;
              font-size: 100px;
           }
    </style>
</head>
<body>
    <script src="./js/lodash.min.js"></script>
    <div class="box"></div>
    <script>
        // 利用防抖实现性能优化
        // 需求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字就会变化+1
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove(){
            box.innerHTML = i++
        }
        // mousemove鼠标移动事件
        // 鼠标一移动就500ms后就触发debounce事件,i就++
        // _.debounce语法(fun,时间)
        box.addEventListener('mousemove', _.debounce(mouseMove,500))
    </script>
</body>
</html>

方法二: 手写一个防抖函数来处理

思路:

        核心是利用setTimeout定时器来实现

        1声明定时器变量

        2每次事件触发时都要先判断是否有定时器,如果有先清除以前的定时器

        3如果没有定时器则开启定时器存入到定时器变量里面

        4定时器里面写函数调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 利用防抖实现性能优化
        // 需求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字就会变化+1
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }
        // 手写防抖函数
        // 核心是利用setTimeout定时器来实现
        // 1声明定时器变量
        // 2每次事件触发时都要先判断是否有定时器,如果有先清除以前的定时器
        // 3如果没有定时器则开启定时器存入到定时器变量里面
        // 4定时器里面写函数调用
        function debounce(fn,t){
          let timer
          //return返回一个匿名函数
          return function(){
             if(timer) clearTimeout(timer)
             timer = setTimeout(function(){
                   fn()  //加小括号调用fn函数
              }, t)
          }  
        }
        box.addEventListener('mousemove',debounce(mouseMove,500))
        // 有括号的函数会直接执行的不用鼠标滑动,所以当鼠标滑动时需要有一个return
    </script>
</body>

</html>

性能优化之防抖,前端,javascript文章来源地址https://www.toymoban.com/news/detail-718024.html

到了这里,关于性能优化之防抖的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 性能优化---节流与防抖

    1、什么是节流和防抖         防抖是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。         节流是指规定一个单位时间,在这个单位时间内,只

    2024年04月17日
    浏览(37)
  • JavaScript中的数据缓存与内存泄露:解密前端性能优化与代码健康

    ​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来JavaScript篇专栏内容:JavaScript-数据缓存与内存泄露 目录 说说你对事件循环的理解 一、是什么 二、宏任务与微任务 微任务 宏任务 三、async与await async await 四、

    2024年02月03日
    浏览(73)
  • 前端优化 ----防抖 节流

    如果一个事件在短时间内连续触发,则只去执行最后一次。 控制频率 实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法 缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟 使一个函数在固定时间内只执行一次。控制

    2024年02月04日
    浏览(39)
  • 节流防抖:提升前端性能的秘密武器(上)

    🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入

    2024年02月04日
    浏览(39)
  • JavaScript 性能优化

    优化JavaScript代码的性能是开发过程中的一个关键任务,它可以显著提升网站或应用的用户体验。以下是一些优化技巧,涵盖了减少重绘、减少内存占用和合并网络请求等方面: 1. **减少重绘和重排:**    - **使用 CSS3 动画:** 避免使用 JavaScript 实现简单动画,尽量使用 CSS3

    2024年02月12日
    浏览(39)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(49)
  • 前端面试:【性能优化】页面加载性能、渲染性能、资源优化

    嗨,亲爱的前端开发者!在今天的Web世界中,用户期望页面加载速度快、交互流畅。因此,前端性能优化成为了至关重要的任务。本文将探讨三个关键方面的性能优化:页面加载性能、渲染性能以及资源优化,以帮助你构建更快速、响应更快的Web应用程序。 1. 页面加载性能:

    2024年02月11日
    浏览(51)
  • [javascript核心-08] V8 内存管理机制及性能优化

    V8 本身也是程序,它本身也会申请内存,它申请的内存称为常驻内存,而它又将内存分为堆和栈 栈内存介绍 栈用于存放JS 中的基本类型和引用类型指针 栈空间是连续的,增加删除只需要移动指针,操作速度很快 栈空间是有限的,若超出栈空间内存,会抛出栈空间溢出错误

    2024年02月16日
    浏览(59)
  • 性能优化 - 前端性能监控和性能指标计算方式

    利用LightHouse进行合理的页面性能优化 这篇文章主要讲解了如何使用 Lighthouse 。 这里把相关图片再展示一下: 我们可以看到 Lighthouse 计算的时候,会根据这几个维度的指标来计算总分。那么本篇文章,就主要讲解下前端性能监控相关的重要指标含义和计算方式。 在介绍指标

    2024年02月15日
    浏览(58)
  • 前端--性能优化【上篇】--网络优化与页面渲染优化

    link标签的rel属性设置dns-prefetch,提前获取域名对应的IP地址 用户与服务器的物理距离对响应时间也有影响。 内容分发网络(CDN)是一组分散在不同地理位置的 web 服务器,用来给用户更高效地发送内容。典型地,选择用来发送内容的服务器是基于网络距离的衡量标准的。 优

    2024年02月08日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包