前端性能优化之：防抖和节流

Mardanjan commented 4 years ago

节流概念 Throttle

按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的
主要应用场景有：scroll，touchmove

防抖的概念 Debounce

抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回到函数那一步。
主要应用场景有：input验证，搜索联想，resize

节流实现

思路：第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下一次判断变量时则为false，函数会以此运行。

防抖实现

思路：首次运行时把定时器赋值给一个变量，第二次执行时，如果间隔没超过定时器设定的时间则会清除掉定时器，重新设定定时器，以此反复，当我们停止下来时，没有执行清除定时器，超过一定时间后出发回调函数
debounce：第一次触发后，进行倒计wait毫秒，如果倒计时过程中若有其它触发，则重新倒计时，否则执行。用来它避免一些重复的操作，直到流量减慢，得到提升性能的一个效果

节流和防抖的伪理论

概念：防抖就是不想持续操作的节流，节流就是固定频率执行的
节流：函数节流是指一定时间内js方法只跑一次。前一次没结束，后一次不会跑。比如滚动条这种按频率触发
防抖：函数防抖是指一定时间内js方法只跑一次，前一次没结束，后一次触发会按后一次的新间隔时间计算，比如按钮持续点击的限速

Mardanjan commented 4 years ago

自己写的防抖的例子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
</head>
<body>
    <input type="text" name="" id="input">
</body>
<script>
    var input = document.querySelector('#input')
    input.oninput = function() {
        debounce()
    }
    var timer
    function debounce () {
        clearTimeout(timer)
        timer = setTimeout( () => {
            console.log(input.value)
        }, 500)
    }
</script>
</html>

Mardanjan commented 4 years ago

自己写的节流的例子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="input">
</body>
<script>
    var input = document.querySelector('#input')
    var timer = true
    input.oninput = function () {
        if (!timer) {return}
        timer = false
        setTimeout(() => {
            console.log('执行了')
            timer = true
        }, 200);
    }

</script>
</html>

Mardanjan / Blog

前端性能优化之：防抖和节流 #37

节流概念 Throttle

防抖的概念 Debounce

节流实现

防抖实现

节流和防抖的伪理论

自己写的防抖的例子

自己写的节流的例子