防抖节流

最新推荐文章于 2023-10-22 23:31:01 发布

已入陆地神仙

最新推荐文章于 2023-10-22 23:31:01 发布

阅读量93

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/qq_43604182/article/details/111469109

版权

防抖节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box,.box1{
            width: 1000px;
            height: 200px;
            background-color: blueviolet;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>

// 防抖触发一次后连续触发无效,触发后隔一段时间才能再触发典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效

 var box = document.querySelector('.box')
    var testDebounce = debounce(move,500)

    box.onmousemove = testDebounce

    function move(ev){
        this.innerHTML = ev.clientX
    }

    function debounce(fn,wait){
        let timmer = null;
        return function(){
            var args = arguments
            var now = !timmer
            if(now){
                fn.apply(this,args)
            }
            timmer && clearInterval(timmer)//clearInterval停止执行
            timmer = setTimeout(() =>{
                timmer = null;
            },wait);       
        }
    }

//节流。频繁触发，再规定时间间隔执行典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时

var box1 = document.querySelector('.box1')
var testJl = jl(move,2000)
box1.onmousemove = testJl
function move(ev){
    this.innerHTML = ev.clientX
}
function jl(fn,wait){
    let timmer = null;
    return function(){
        var args = arguments
        if(!timmer){
            timmer = setTimeout(() =>{
                timmer = null   
                fn.apply(this,args)
            },wait); 
        }     
    }
}

已入陆地神仙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖节流

防抖节流<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box,.box1{ width: 1000px; height: 200px; background-color: b
复制链接

扫一扫