js 防抖 节流处理 应用场景

防抖

应用场景 ：

1 百度联想查询 : 百度搜nike 会等你输入完nike后 页面跳转 不是你输入完n就立刻给你查询结果

2 页面滚动特定距离 显示【返回顶部按钮】

3 页面resize 触发事件 

代码

HTML

<input type="text" id="unDebounce">


JS

function ajax(content) {
        console.info(this)
        console.log('ajax request ' + content)
    }
function debounce(fun,delay){
  return function (args) {
    let that = this
    let _args = args
    clearTimeout(fun.id)
    fun.id = setTimeout(function () {
        fun.call(that,_args)
    },delay)
  }
}
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax,500)
inputb.addEventListener('keyup',function (e) {
    debounceAjax(e.target.value)
})

节流

应用场景

1 连续点击按钮 切 需求为 间隔请求   例如  页面的【刷新】按钮 

2 上拉加载获取数据 的【上拉加载】

代码

HTML

<input type="text" id="throttle">

JS

function ajax(content) {
  console.log('ajax request ' + content)
}

let throttle = function (fn, delay) {
    let last, deferTimer
    return function () {
        let that = this
        let _args = arguments
        let now  = +new Date() 
        if(last && now < (last + delay)){
          clearTimeout(deferTimer)
          deferTimer = setTimeout(function () {
               last = now
               fn.apply(that,_args)
          },delay)
        }else{
          last = now
          fn.apply(that,_args)
        }
    }
}
let throttleAjax = throttle(ajax,1000)
let throttleBtn = document.getElementById('throttle')
throttleBtn.addEventListener('keyup',function (e) {
    throttleAjax(e.target.value)
})