防抖节流【问题三】

最新推荐文章于 2024-05-24 23:45:01 发布

牛小小小婷～

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量192

点赞数 1

分类专栏： # JavaScript 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/hannah2233/article/details/128647114

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

文章目录

一、手撸组件间传值

【Vue基础九】–父子组件传值
 【Vue基础十】— 兄弟组件之间传值【中央事件总线，消息订阅与发布】

二、Promise实现的sleep

 const sleep = (time) => {
     return new Promise((resolve, reject) => {
         setTimeout(resolve,time)
     })
 }
 
 sleep(3000).then({
     console.log('延迟三秒才执行的哦')
 })

三、防抖和节流

3-1

函数防抖和节流：优化高频率执行js代码的一种手段
- js中一些事件： 像resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断调用绑定在事件上的回调函数，极大浪费资源，降低前端性能
- 为了优化体验，需要对这类事件进行调用次数的限制

3-1-1 防抖

防抖：在事件被触发n秒后再执行回调，如果这n秒内又被触发，则重新计时

var timer;   
function debounce(fn, delay) {
    clearTimeout(timer);
    timer = setTimeout(function() {
        fn();
    },delay);
}

例子中的debounce就是防抖函数

var timer只能在setTimeout的父级作用域中，这样才是同一个timer，并且为了方便防抖函数的调用和回调函数fn的传参问题,应该用闭包来解决这些问题

function debounce(fn,  delay) {
    var timer;   // 维护一个timer
    return function() {
        var _this = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);   // 用apply指向调用debounce的对象，相当于_this.fn(args)
        },delay);
    }
}

使用闭包后，解决传参和封装防抖函数的问题，就可以在其他地方随便将需要防抖的函数传入debounce了

3-1-2 节流

每隔一段时间，只执行一次函数

定时器实现节流函数：

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null;   // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

时间戳实现节流函数：

function throttle(fn, delay) {
    var previous = 0;
    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
    return function() {
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

3-2 函数节流和防抖的异同比较

相同点：
- 都可以通过使用setTimeout实现
- 目的：降低回调执行频率，节省计算资源
不同：
- 函数防抖:
  - 在一段连续操作结束后，处理回调，利用clearTimeout 和setTimeout实现
  - 一定时间连续触发的事件只在最后执行一次
- 函数节流：
  - 在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
  - 侧重于一段时间内只执行一次

3-3 应用场景：

3-3-1 函数防抖

连续的事件，只需触发一次回调的场景有
- 搜索框搜索输入
  - 用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小Resize
  - 只需窗口调整完成后，计算窗口大小，防止重复渲染

3-3-2 函数节流

间隔一段时间执行一次回调
- 滚动加载，加载更多或滚到底部监听
- 谷歌搜索框，搜索联想功能
- 高频点击提交，表单重复提交

四、 JS实现加减乘除

<!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" id="tex1" />
    <select id="select">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" id="tex2" />
    <input type="button" value=" = " id="button" />
    <input type="text" id="fruit" />

    <script>
        var button = document.getElementById("button");
        button.addEventListener("click", count)

        function count() {
            var a = parseInt(document.getElementById("tex1").value);
            console.log(a);
            var b = parseInt(document.getElementById("tex2").value);
            console.log(b);
            var selectSign = document.getElementById("select").value;

            switch (selectSign) {
                case '+':
                    answer = a + b;
                    break;
                case '-':
                    answer = a - b;
                    break;
                case '*':
                    answer = a * b;
                    break;
                case '/':
                    answer = a / b;
            }
            document.getElementById("fruit").value = answer;
        }
    </script>

</body>

</html>

五、算法：二分查找

忘记当时啥子题目，知识点是二分查找

牛小小小婷～

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖节流【问题三】

var timer只能在setTimeout的父级作用域中，这样才是同一个timer，并且为了方便。：在事件被触发n秒后再执行回调，如果这n秒内又被触发，则重新计时。函数的调用和回调函数fn的传参问题,应该用闭包来解决这些问题。函数防抖和节流：优化高频率执行js代码的一种手段。忘记当时啥子题目，知识点是二分查找。每隔一段时间，只执行一次函数。
复制链接

扫一扫