函数防抖和节流

DOM操作(onresize, onscroll….等等操作),有的的时候会多次触发,为了减少操作,从而有了节流的概念。

函数节流的思想很简单:在每次出发的时候我们就开一个定时器,将DOM操作延迟,然后在下一次事件触发的时候,我们把这个定时器关掉,我们开关定时器,一直到一定的时机在触发事件。

javasscript 高级程序设计中的方法
function throttle (fn, context) {
  fn.tId && clearTimeout(fn.tId)

  fn.tId = setTimeout((() => {
    fn.call(context)
  }, 500)
}
// 很简单进入函数则清除定时器,重新创建一个定时器,然后把定时器id设置为fn,做缓存,等到用户事件不触发,500毫秒以后执行事件,并通过call修改执行this指向
网上流行的方法
function throttle (fn, delay) {
  var timer = null;
  return function () {
    var context = this,
        args = arguments;
    clearTimeout(timer)

    timer = setTimeout(() => {
      fn.apply(context, args)
    }, delay)
  }
}

函数防抖

函数节流是一个很好用的方法,但是在某些场景下,我并不希望每次都是要事件结束后等待delay的时间后才执行回调,但是又希望减少操作,那么我们可以按照之前的思想,开关定时器即可

//第一种 我们根据时间触发函数
function throttle(fn , duration ,delay ){
    var timer = null, 
        // 记录下开始执行函数的时间
        begin = new Date();

    return function () {
        var context = this, 
            args = arguments;
            // 记录下当前时间
            current = new Date();
        // 函数节流里的思路
        clearTimeout(timer)

        // 记录下的两个时间相减再与duration进行比较
        if (current-begin >= duration) {
             fn.apply(context , args)
             begin = current;
        } else {  
            timer = setTimeout(() => {
                fn.apply(context , args)
            }, delay)
        }
    }
}

//第二种 根据触发的次数触发函数
function throttle(fn, maxLength){
    //新建计数器,最大等待次数
    var count = 0
        maxLength = maxLength || 300;
    // 返回一个函数,实现作用域,缓存count的状态和maxLength
    return function () {
        var context = this, 
            args = arguments, 

        // 不满足条件 则不继续执行方法
        count++;
        if(count < maxLength) return '';

        // 当到达需要触发的时机以后我们触发函数,并将计数器归零
        count = 0
        fn.apply(context , args)
    }
}
### 回答1: JS函数防抖节流是两种不同的技术,用于解决类似的问题。 防抖(debounce)指在一定时间内只执行一次函数,如果在这段时间内再次触发函数,则重新计时。这通常用于用户输入或窗口调整等场景,以防止不必要的计算或请求。 节流(throttle)指在一定时间内只执行一次函数,如果在这段时间内再次触发函数,则忽略。这通常用于限制事件的频率,例如鼠标滚动或网络请求。 总的来说,防抖节流都是为了避免因频繁的事件触发导致的性能问题。 ### 回答2: JS函数防抖节流是两种常用的优化手段,用于控制函数的执行频率,减少不必要的资源消耗。 函数防抖的原理是当事件触发后,不立即执行函数,而是等待一段时间(如1000毫秒),如果在这段时间内没有再次触发该事件,则执行函数;如果在该时间段内再次触发了该事件,则重新计时,等待一段时间后再执行函数函数防抖常用于限制高频率触发的事件,比如输入框中的搜索功能,用户连续输入时,只有在停止输入一段时间后,才会执行搜索操作。这样可以减少请求次数,避免不必要的资源浪费。 函数节流的原理是规定一个单位时间,在这个单位时间内,只能执行一次函数。如果在单位时间内多次触发了该事件,只有第一次触发会执行函数,其他触发会被忽略。函数节流常用于限制高频率触发的事件,比如页面滚动时的加载更多功能,用户快速滚动页面时,只会在固定的时间间隔内触发一次加载更多。 总结来说,函数防抖是等待一段时间后执行函数,期间事件还会重新计时,确保函数只在最后一次触发后执行;而函数节流是按照固定的时间间隔执行函数,不管触发次数多少,只在规定的时间间隔内执行一次函数函数防抖更适合控制高频率触发的事件,而函数节流更适合控制单位时间内触发的次数。 ### 回答3: JS函数防抖节流都是用来控制函数执行频率的技巧,但它们的实现方式和应用场景有所不同。 函数防抖是指在事件触发后,等待一定时间之后再执行函数。如果在这个等待时间内再次触发了该事件,就会重新计时。防抖的主要作用是减少函数执行的频率。常见的应用场景有输入框的关键词搜索,用户在输入过程中频繁触发输入事件,而我们希望用户停止输入后再进行搜索操作。使用函数防抖可以避免用户每输入一个字符都进行搜索,减少服务器负载。 函数节流是指在一定时间间隔内只执行一次函数。相比于函数防抖函数节流更注重于函数执行的间隔时间。如果在指定的时间间隔内多次触发了该函数,只有在间隔时间到达后才会执行函数。常见的应用场景包括页面滚动事件、窗口大小改变事件等。通过函数节流,我们可以控制事件响应的频率,避免过于频繁的函数执行。 总结起来,函数防抖适用于限制函数执行频率,主要用于输入框搜索等场景。而函数节流适用于限制函数连续触发的频率,主要用于页面滚动、窗口大小改变等场景。两者的区别在于对时间的处理方式,一个是等待一段时间后执行,一个是一段时间内只执行一次。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值