【无标题】

最新推荐文章于 2024-08-27 15:59:21 发布

遇见颜言

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量34

点赞数

分类专栏： JavaScript 文章标签： javascript Powered by 金山文档

原文链接：https://vue3js.cn/interview/JavaScript/debounce_throttle.html#%E4%B8%80%E3%80%81%E6%98%AF%E4%BB%80%E4%B9%88

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为什么使用防抖和节流：

防抖和节流都是前端开发中非常重要的优化技术，可以有效地优化页面性能，提升用户体验。

什么是防抖：

在事件被触发n秒之后再执行回调函数，如果在这个事件段内再被触发的话就会重新计时。类似于一开始的王者荣耀，在点击回程之后的一段时间后才能回城，当你在处于回城时间段内再次点击之后就会重新开始。

防抖的应用场景：

搜索框搜索输入。只需用户最后一次输入完，再发送请求

手机号、邮箱验证输入检测

窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

防抖的实现

<!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>
</head>
<body>
    <input type="text">
    <script>
        const ipt = document.querySelector('input')
        ipt.addEventListener('keyup',debounce(
            function(){
            console.log(ipt.value);
        }
        ))
        function debounce(fn){
            let timer = null
            return function(){
              if(timer){
                clearTimeout(timer)
              }
              timer = setTimeout(()=>{
                fn.apply(this,arguments)
                timer = null
              },1000)
            }
        }
    </script>
</body>
</html>

什么是节流？

n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

应用场景

滚动加载，加载更多或滚到底部监听

搜索框，搜索联想功能

节流的实现：

<!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>
</head>
<body>
    <input type="text">
    <script>
        const ipt = document.querySelector('input')
        ipt.addEventListener('keyup',throttle(
            function(){
            console.log(ipt.value);
        }
        ))
// 触发事件 一段时间内只执行一次
        function throttle(fn){
           let timer;
           return function(){
            if(!timer){
            timer = setTimeout(()=>{
                fn.apply(this,arguments);
                timer = null
            },3000)
           }
           }
        }


    </script>
</body>
</html>