防抖和节流

希望大佬文章可以白嫖

已于 2022-07-14 18:24:37 修改

阅读量60

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-07-13 00:16:07 首次发布

本文链接：https://blog.csdn.net/shiyibushiwei/article/details/125754882

版权

前端开发防抖节流性能优化 JavaScript

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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: #ccc;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        // 什么是防抖
        // 在规定的时间n秒钟函数只执行一次，如果n秒内重复操作，函数时间会从新计算
        // 例如：5秒钟执行一次函数fn，第4秒的时候又操作页面那么时间从新计算5秒后在执行
        // debounce  防抖

        // 重绘和回流
        // 重绘：页面的颜色改变，结构不变
        // 回流：页面的结构（或者大小）发生变化
        // 定义一个防抖函数

        function debounce(fn, time) {
            let timer = null
            return function () {
                let that = this
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn.apply(that)
                }, time)
            }
        }

        var oBox = document.querySelector("#box")
        var num = 0
        // oBox.onmousemove = function () {
        //     num++
        //     oBox.innerHTML = num
        // }
        oBox.onmousemove = debounce(function () {
            oBox.innerHTML = num++
        }, 1000)
    </script>
</body>

</html>

<!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="text">
    <div id="box"></div>
    <script>
        // 节流
        // 函数在n秒内执行一次，在n秒内重复操作也不会重复执行，到时间就会执行
        // 一个函数5秒内执行一次，即使重复操作，间隔5秒就会自动执行
        // 坐公交车 30分钟一班
        // throttle 
        // 定义一个节流函数
        function throttle(callback, time) {
            var obj = {}
            var timer = null
            var fn = function () {
                callback.apply(obj)
            }
            var nowTime = Date.now() //获取当前时间戳
            return function () {
                obj = this
                var oTime = Date.now() //在获取一个时间
                var awaitTime = oTime - nowTime - time
                if (awaitTime > 0) {
                    nowTime = oTime
                    timer = setTimeout(fn, time)
                }
            }
        }

        var oText = document.querySelector("#text")
        var oBox = document.querySelector("#box")
        oText.addEventListener("input", throttle(function () {
            oBox.innerHTML = oText.value
        }, 3000))

    </script>
</body>

</html>