防抖函数和节流函数封装

最新推荐文章于 2023-07-10 17:58:05 发布

92huahua

最新推荐文章于 2023-07-10 17:58:05 发布

阅读量222

点赞数 1

分类专栏： javascript 文章标签：封装 javascript 防抖函数和节流函数

本文链接：https://blog.csdn.net/Cinderellahh92/article/details/115756133

版权

javascript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

本文深入探讨了JavaScript中的两种性能优化技术——防抖(debounce)和节流(throttle)。防抖函数确保在停止输入后1秒才执行回调，避免频繁触发。节流函数则限制了函数的执行频率，方法一是通过计算时间差来控制，方法二是使用setTimeout实现。这些技术在处理用户输入、滚动事件等场景中极为有效。

摘要由CSDN通过智能技术生成

1.防抖函数

// 不再输入后1秒触发函数
    function debounce(delay,callback){
        let timer
        return function (value) {
            clearTimeout(timer)
            timer = setTimeout(function () {
                callback(value)
            }, delay);
        }
    }
    function fn(value){
        console.log(value) // 回调函数
    }
    var debounceFunc = debounce(1000,fn)
    input.addEventListener('keyup',function(e){
        debounceFunc(e.targer.value)
    })

2.节流函数

// 方法一
    var btn = document.getElementById('input')
    btn.addEventListener('click', throttle(submit, 2000), false)
    function submit() {
        console.log(e, this)
    }
    function throttle(fn, delay) {
        var begin = 0
        return function () {
            var cur = new Date().getTime()
            if (cur - begin > delay) {
                fn.apply(this,arguments)
                begin = cur
            }
        }
    }
    // 方法二
    function throttle(func,delay) {
        let timerOut
        return function () {
            if (!timerOut) {
                timerOut = setTimeout(function() {
                    func()
                    timerOut = null
                }, delay);
            }
        }
    }
    function handle() {
        console.log(Math.random())
    }
    document.getElementById('button').onclick = throttle(handle,2000)