前端的防抖和节流,及使用场景。

1,什么是防抖和节流
短时间内大量的触发某函数导致的性能的问题

防抖debounce:在事件触发n秒后再执行,如果在n秒内又有新的触发,就重新计算
例如:一直输入就不发送,等2秒内不再输入了就发送,如果再次输入了,2秒时间从新计算

节流throttle:连续事件触发,在指定的时间内,不管触发几次,就只执行一次
例如:在指定的时间内多次触发无效

有防抖和节流的插件:lodash

2.使用场景:
防抖:实时搜索(keyup) 、 拖拽(mousemove)、
节流:窗口调整(resize)、页面滚动(scroll)、抢购和疯狂点击(mousedown)、

3.详细介绍一下:
在前端开发中一部分的用户行为会频繁的触发事件执行,对DOM的操作
资源加载等耗费性能的处理,很可能导致界面卡顿,甚至浏览器崩溃
函数(防抖和节流)就是为了解决类似的需要应运而生的。

简单的代码运用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    搜索<input type="text" id="myinput" />
    <button id="mybtn">提交</button>
</body>

</html>
<script>
    function search() {
        console.log('去请求接口');//先请求接口数据
    }
    //防抖
    function debounce(fn, time) {
        let timer = null;
        return function () {
            //执行之前,先判断是否有定时器,有就先清除,保证只有一个定时器
            if (timer) {
                clearTimeout(timer);//清除定时器
            }
            //在用户输入时,如果停顿了2s,就去调数据
            timer = setTimeout(() => {
                fn();//触发事件
                timer = null;//定时器的使用(自定义规范)
            }, time);//触发时间(2s或.....)
        }
    }
    function btn() {
        console.log('去提交');//提交数据
    }
    //节流
    function throttle(fn, time) {//连续触发事件  规定的时间
        let flag = false;
        return function () {
            //使用标识判断是否在规定的时间内重复触发了函数,没有就触发,有就不触发
            if (!flag) {//不为假时 执行以下
                fn();//触发事件
                flag = true;//为真
                setTimeout(() => {//超时调用(在规定的时间内只执行一次)
                    flag = false;
                }, time);
            }
        }
    }
    myinput.onkeyup = debounce(search, 2000);//键盘弹起触发 防抖(search,2s时间)
    mybtn.onclick = throttle(btn, 3000);//单击事件   节流(btn,3s时间)
</script>

你可能感兴趣的:(防抖和节流,定时器)