码迷,mamicode.com
首页 > 其他好文 > 详细

防抖(debounce)与节流(throttle)

时间:2021-05-24 02:59:29      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:gil   var   搜索框   nts   func   手机   date   style   不执行   

1.防抖(debounce)

  --函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

  --防抖应用场景--------连续的事件,只需触发一次回调的场景   将多次函数的执行变成一次函数的执行

    1.搜索框搜索输入。只需用户最后一次输入完,再发送请求

    2.手机号、邮箱验证输入检测

    3.窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染

            // 函数防抖
    const debounce = (func,time) => {
      let timer;
      return () => {
        clearTimeout(timer);
        timer = setTimeout(func, time);
      };
    }; 

          // 第一不执行延迟 后面会照常执行
    function debounce(func,time,triggleNow) {
      var timer = null

          var debounced = function(){
            var _self = this,
                args = arguments
          }
          if(timer) {
            clearTimeout(timer)
          }
          if(trigilleNow) {
            var exec = !timer
            timer = setTimeout(function () {
              timer =null
            },time)

            if(exec) {
              fn.apply(_self,args)
            }
          }else {
            timer = setTimeout(function(){
              fn.apply(_self,args);
            },timer)
          }

        debounced.remove = function () {
          clearTimeout(timer)
          timer = null
        }
    }

 

2.节流(throttle)

  --函数节流,就是限制一个函数在一定时间内只能执行一次。 例如单位时间内触发了30次事件 也只会执行第一次 后面不执行

  --节流的应用场景

    1.滚动加载,加载更多或滚到底部监听

    2.搜索框,搜索联想功能

    3.高频点击提交,表单重复提交

            // 节流
 function throttle (fn,interval) {
      // 最后一次执行时间
      let last = 0
      return function () {
        // 事件
        let context = this
        // 对象
        let args = arguments

        //  设置当前时间
        let now = +new Date()
        // 时间差超出了设定计时
        if((now - last) > interval) {
          // 重新设置最后一次执行时间
          last = now
          // 切换this指向
          fn.apply(context,args)
        }
      }
    }    

 

防抖(debounce)与节流(throttle)

标签:gil   var   搜索框   nts   func   手机   date   style   不执行   

原文地址:https://www.cnblogs.com/shirunfeng/p/14747570.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!