【js】防抖和节流的使用场景和区别:

这篇具有很好参考价值的文章主要介绍了【js】防抖和节流的使用场景和区别:。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、防抖 (多次触发 只执行最后一次)

作用: 高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间
防抖类似于英雄联盟回城6秒,如果回城中被打断,再次回城需要再等6秒
【js】防抖和节流的使用场景和区别:,JavaScript,javascript,前端,开发语言

<body>
    <input type="text" id="inp">
    <script>
    
        // 1.封装防抖函数
        function debounce(fn, time) {
            // 4.创建一个标记用来存放定时器的返回值
            let timeout = null;
            return function () {
                // 5.每当用户触发input事件  把前一个 setTimeout 清楚掉
                clearTimeout(timeout);
                // 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话,就不会执行 setTimeout里面的内容
                timeout = setTimeout(() => {
                    // 7.这里进行防抖的内容
                    fn();
                }, time);
            };
        }

        // 2.获取inpt元素
        var inp = document.getElementById('inp');
		// 8. 测试防抖临时使用的函数
        function sayHi() {
            console.log('防抖成功');
        }
        // 3.给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件 
        inp.addEventListener('input', debounce(sayHi, 5000)); 

    </script>
</body>
二、节流 (规定时间内 只触发一次)

作用: 高频率触发的事件,在指定的单位时间内,只响应第一次
节流类似于英雄联盟里的英雄平A 一定是内点击多次只进行攻击一次
【js】防抖和节流的使用场景和区别:,JavaScript,javascript,前端,开发语言

    <script>
        // 1.封装节流函数
        function throttle(fn, time) {
            //3. 通过闭包保存一个 "节流阀" 默认为false
            let temp = false;
            return function () {
                //8.触发事件被调用 判断"节流阀" 是否为true  如果为true就直接trurn出去不做任何操作
                if (temp) {
                    return;
                } else {
                    //4. 如果节流阀为false  立即将节流阀设置为true
                    temp = true; //节流阀设置为true
                    //5.  开启定时器
                    setTimeout(() => {
                        //6. 将外部传入的函数的执行放在setTimeout中
                        fn.apply(this, arguments);
                        //7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键)  表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true,在开头被return掉
                        temp = false;
                    }, time);
                }
            };
        }
        function sayHi(e) {
            // 打印当前 document 的宽高
            console.log(e.target.innerWidth, e.target.innerHeight);
        }
        // 2.绑定事件,绑定时就调用节流函数  
        // 敲黑板!!! 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
        window.addEventListener('resize', throttle(sayHi, 2000));
    </script>
三、防抖和节流的使用场景
【1】防抖(debounce)

1.search搜索时,用户在不断输入值时,用防抖来节约请求资源。

【2】节流(throttle)

1.鼠标不断点击触发,mousedown(单位时间内只触发一次)
2.监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断文章来源地址https://www.toymoban.com/news/detail-696024.html

到了这里,关于【js】防抖和节流的使用场景和区别:的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 小程序如何使用防抖和节流?

    防抖(Debounce)和节流(Throttle)都是用来优化函数执行频率的技术,特别在处理用户输入、滚动等频繁触发的情况下,它们可以有效减少函数的执行次数,从而提升性能和用户体验。但它们的工作方式和应用场景有所不同。 防抖的主要思想是,当持续触发事件时,在事件最

    2024年02月13日
    浏览(37)
  • Vue - 使用Lodash实现防抖和节流

    GitHub Demo 地址 在线预览 Lodash 官网 更新:对应的vue3版的demo如下: GitHub Demo 地址 在线预览 参考: Vue 防抖节流 详细介绍 vue 优雅的实现防抖和节流 防抖、节流的介绍 js防抖和节流的实现原理及应用场景 js防抖节流应用场景及写法 JS中的防抖 函数节流(throttle)与 函数防抖(

    2024年02月01日
    浏览(47)
  • 【前端】防抖和节流原理+实现

    防抖(Debounce)和节流(Throttle)都是用于控制函数执行频率的机制,它们在处理高频触发的事件时非常有用。 防抖的原理是在事件被触发后,等待一段时间(例如200毫秒)来执行函数,如果在等待时间内事件被再次触发,则重新计时。这样可以避免在短时间内多次触发事件

    2024年04月16日
    浏览(39)
  • 防抖和节流及多种实现方式

    当用户在网页中进行操作时,如点击、滚动、输入等,往往会频繁地触发事件。如果每个事件都立即执行相应的函数,可能会导致性能问题和用户体验不佳,因为这些函数可能需要执行复杂的操作,如计算、网络请求等。 为了优化这种情况,我们可以使用防抖和节流来限制函

    2023年04月24日
    浏览(49)
  • axios、跨域与JSONP、防抖和节流

    Axios 是专注于 网络数据请求 的库。 相比于原生的 XMLHttpRequest 对象,axios 简单易用 。 相比于 jQuery,axios 更加 轻量化 ,只专注于网络数据请求。 axios.get(\\\'url\\\', { params: { /*参数*/ } }).then(callback) 例如: axios.post(\\\'url\\\', { /*参数*/ }).then(callback) 例如: 例如: 如果两个页面的 协议

    2024年02月08日
    浏览(41)
  • 19、节流和防抖的区别以及应用场景的理解

    节流和防抖两者有什么区别? 节流和防抖分别用于什么场景? 节流( throttle )和防抖( debounce )是两种常用的浏览器事件处理方法。 相同点: 都是为了减少事件触发频率,优化性能。 不同点: 节流是指在一段时间内最多触发一次事件,节流算法会在特定的时间间隔内判断是否触

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

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

    2024年04月27日
    浏览(51)
  • 了解同源策略 JSONP 案例-淘宝搜索 防抖和节流

    什么是跨域 同源指的是两个 URL 的协议、域名、端口一致,反之,则是跨域。 出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。 网页:http://www.test.com/index.html 接口:http://www.api.com/userlist 浏览器对跨域请求的拦截 注意:浏览器允许发起跨域请

    2024年02月05日
    浏览(64)
  • 了解防抖和节流:提升前端交互体验的实用策略

    本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理,然后探讨了它们在前端开发中的应用场景,如输入框搜索、滚动事件等。最后,通过简单的代码示例展示了如何实现防抖和节流函数。通过学习和应用这两种技术,我们可以有效地减少不必

    2024年02月05日
    浏览(40)
  • 手写一个防抖节流函数及其使用场景

      防抖和节流是性能优化手段 什么是防抖? 防抖:单位时间内,频繁触发事件,只执行最后一次。 防抖的主要应用场景: 搜索框搜索输入。只需用户最后一次输入完,再发送请求 手机号、邮箱验证输入检测 什么是节流? 节流:单位时间内,频繁触发事件,只执行一次。

    2024年02月09日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包