美文网首页
函数闭包应用节流和防抖

函数闭包应用节流和防抖

作者: Chris__Liu | 来源:发表于2019-01-17 10:13 被阅读0次

应用场景主要是用户频繁操作后,通过定时请求。可以减少服务器的请求次数。

防抖debounce

function debounce(fn,delay){
    let timer = null;
    return function(){
        let context = this
        let args = arguments
        clearTimeout(timer)
        timer = setTimeout(function(){
            fn.apply(context,args) 
        },delay)
    }
}
let flag = 0
function foo(){
    flag++
    console.log('Number of calls:%d',flag)
}

document.addEventListener('click',debounce(foo,1000))

节流 throttle

相对于防抖更加宽松,防抖主要是用户触发最后一次事件后,延迟一段事件触发,而节流会规定的时间内触发一次事件。

function throttle(fn,delay){
    let timer = null;
    let startTime = Date.now()

    return function(){
        let curTime = Date .now()
        let remaining = delay - (curTime -startTime)
        const context = this
        const args = arguments

        clearTimeout(timer)
        if(remaining<=0){
            fn.apply(context,args)
            startTime = Date.now();
        }else{
            timer = setTimeout(fn,remaining)
        }
    }
}
function xxx(){
    console.log('1')
}
document.addEventListener('click', throttle(xxx,5000))

相关文章

  • 闭包实现函数防抖节流

    闭包函数的典型应用就是防抖节流函数 闭包 红宝书(p178)上对于闭包的定义: 闭包是指有权访问另外一个函数作用域...

  • JS性能优化之——节流和防抖

    闭包 由于节流和防抖函数的实现都用到了闭包,所以在了解节流和防抖之前我先简单介绍下什么是闭包。 由于js代码在一个...

  • 函数闭包应用节流和防抖

    应用场景主要是用户频繁操作后,通过定时请求。可以减少服务器的请求次数。 防抖debounce 节流 throttl...

  • 前端面试题【Day01】

    本篇绪论1,闭包2,深浅拷贝3,防抖、节流 1,闭包 闭包的定义很简单:函数 A 返回了一个函数 B,并且函数 B...

  • JavaScript 节流和防抖

    什么是节流和防抖 节流和防抖的本质都是用闭包的形式,通过对事件对应的回调函数进行包裹,用自由变量缓存时间信息,最后...

  • Javascript 基础

    1、函数防抖和函数节流 【《javascript高级程序设计》里,函数节流是这里讲的函数防抖。】函数防抖: 在事件...

  • 什么是节流、防抖函数?作用及应用场景?如何实现?

    函数防抖(debounce): 函数节流(throttle): 共同点: 函数节流的应用场景(throttle) ...

  • 函数防抖与节流

    函数防抖与节流 函数防抖与节流是很相似的概念,但它们的应用场景不太一样。 函数防抖: 任务频繁触发的情况下,只有任...

  • JS函数防抖与节流

    函数节流和防抖在前端开发中应用广泛,例如:函数防抖可以用于对用户输入的自动补全操作、函数节流可以用于对用户浏览行为...

  • JavaScript函数节流

    一、前言 相对于函数防抖来说,函数节流的应用场景和频次更大一些。当然,如果想复习函数防抖,请点击《函数防抖》。废话...

网友评论

      本文标题:函数闭包应用节流和防抖

      本文链接:https://www.haomeiwen.com/subject/yjmbdqtx.html