js 函数防抖和截流(防止函数一直触发对页面造成压力)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Meditate_MasterYi/article/details/87006028

成熟插件 lodash
概念解释
防抖 :在事件一直触发时,只会触发一次
截流:在事件一直触发时,会按照频率多次触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ceshi{
            background-color: red;
            width: 500px;
            min-height: 50px;
            margin:0px auto;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="ceshi" style="">keydown</div>
<script src="loadash.js"></script>
<script>

    let ceshi = document.getElementById("ceshi");
    let keyF = function () {
        console.log("keydown")
        ceshi.innerText=ceshi.innerText+" ceshi "
    }
    // document.addEventListener("keydown",keyF)// 不使用任何限制
    document.addEventListener("keydown",_.debounce(keyF,1000))// 使用防抖功能
    // document.addEventListener("keydown",_.throttle(keyF,1000))// 使用截流功能
</script>
</body>
</html>

展开阅读全文

没有更多推荐了,返回首页