js 定时网页点击_JS防抖和节流傻傻分不清楚

这两个概念经常混淆, 今天就来捋一捋两者的概念/区别以及使用JS来实现的方式.

一. 防抖(debounce)

任务频繁触发的情况下, 只有任务触发的间隔超过指定时间的时候, 任务才执行. 例如执行resize()事件时, 当改变窗口大小时, 会频繁的触发resize事件, 可能短时间内就执行几十次, 这是相当消耗性能的.

JS实现思路:

利用setTimeout和clearTimeout来实现, 开启一个定时器, 设定延迟时间, 每次执行resize事件时, 将定时器清除, 然后再重新开启一个定时器, 因此, 不管触发多少次resize事件, 只有每次触发时间后, 只有等待所设置的timeout时间才会触发.

代表事件: 联想词

JS实现

<script>
    // 鼠标进入, count加1
    let count = 0;
    function doSomething (e) {
        count++
        $('.wrapper').text(count)
    }
    // 防抖-->频繁触发事件时, 限制其隔一段时间在触发
    function debounce (func, wait) {
        let timeout;
        return function () {
            let args = arguments; // 包含event对象
            let context = this; // this指向调用对象$('.wrapper')
            clearTimeout(timeout)
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait)
        }
    }
    $('.wrapper').mousemove(debounce(doSomething, 300))
</script>

二. 节流(throttle)

指定时间间隔内只会执行一次任务. 这个好理解, 比如设置间隔时间为1s, 那么在1s之内, 不管触发了多少次事件, 都只会执行一次.

JS实现思路: 利用时间戳来实现, 具体思路为计算上一次触发的时间, 然后与当前时间做差值, 如果这个差值大于我们设置的wait时间, 则允许触发, 否则不允许触发.

代表事件: 用户点击提交按钮

JS实现

<script>
    // 鼠标进入, count加1
    let count = 0;
    function doSomething (e) {
        count++
        $('.wrapper').text(count)
    }
    $('.wrapper').mousemove(throttle(doSomething, 1000))
    // throttle函数
    function throttle (func, wait) {
        let pre = 0
        return function () {
            let args = arguments;
            let context = this
            let now = new Date().valueOf()
            if (now - pre > wait) {
                pre = now
                func.apply(context, args)
            }
        }
    }
</script>

节流这里还有一种方法, 具体上代码.(不过我还是更倾向于第一种方法, 简单易懂)

// 鼠标进入, count加1
let count = 0;
function doSomething (e) {
    count++
    $('.wrapper').text(count)
}
$('.wrapper').mousemove(throttle(doSomething, 1000))
// throttle函数
function throttle (func, wait) {
    let args, context, timeout;
    return function () {
        args = arguments;
        context = this;
        if (!timeout) {
            timeout = setTimeout(function () {
                func.apply(context, args)
                timeout = null
            }, wait)
        }
    }
}

最后附上style:

.wrapper{
    height: 200px;
    width: 50%;
    background: #ccc;
    font-size: 40px;
    color: red;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
}