节流函数及其应用

定义:在一个单位时间内只触发一次,如果在这个单位时间内多次触发,只执行一次

  1. 定义节流函数
function throttle(){
  let timer = 0
  return function(fn,delay){
    let that = this
    let args = arguments
    if (timer){
      return
    }
    timer = setTimeout(()=>{
          fn.apply(that,args)
          timer = 0
    },delay)
  }
}
  1. onload函数取出节流函数
let update = throtte(search,500)
  1. 触发函数里面执行
window.onresize(()=>{
    update('123')
})
  1. 实际执行函数
search(val){
    console.log(val)//123
    .....
}

应用:
鼠标不断点击触发,mousedown(单位时间内只触发一次)
监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 建议使用 lodash 插件里面的 throttle 函数来实现 1、节流函数简单原理 2、节流函数的应用
    弹力盒阅读 2,953评论 0 0
  • 节流函数(throttle) 上一篇文章说了防抖函数的实现,其实着两个函数是类似的,都可以实现性能优化,那么如何抉...
    js好难学啊阅读 14,839评论 0 3
  • 节流(throttle)与防抖(debounce) 场景 因频繁执行DOM操作,资源加载等行为,导致UI停顿甚至浏...
    学编程的小屁孩阅读 3,375评论 0 0
  • 节流函数和防抖函数都是为了避免一段时间内某个方法被疯狂触发。 但是这两者也有所不同:节流函数是让某方法在一段时间内...
    狗不乐阅读 1,079评论 0 1
  • 2020-06-17 每日一题:防抖和节流函数 本文也在我的blog上发布:跳转博客 题目 引子 第一次接触防抖和...
    CafuChino阅读 3,919评论 0 0