JS之节流和防抖

fevin 发布于2019-08-26 17:15 / 2877人阅读

摘要：节流在指定时间之内，让函数只触发一次。防抖对于一定时间段的连续的函数调用，只让其执行一次。总结以上只是很简单的写了一下节流和防抖的原理，在里，实现起来更加复杂，但是背后的原理核心就是上边代码写的。

概述

在平时的开发中，经常会听到两个差不多很相近的词。节流（throttle）和防抖（debounce）。这是两个类似又有些不同的优化方案。

节流：在指定时间之内，让函数只触发一次。
防抖：对于一定时间段的连续的函数调用，只让其执行一次。

两个方法在underscore.js中都已经实现了。本文将会重点说明两个函数的应用场景和背后的原理。

应用场景 节流

throttle在英语里的意思是节流阀，顾名思义，设置一个阀值（制定一个时间），在这个阀值或者时间之内，函数只会执行一次。

举个例子，我们执行页面滚动的时候，比如在react里面，可能每次滚动都会触发一次render，这样严重影响性能，甚至会造成浏览器卡死。如果我们设置一个300ms的时间阀，那么在这段时间内，滚动时候只会触发一次render.

同样的，当我们拖拽某个元素的时候，会每次判断mousemove时跟位置相关的信息，每次都会执行相关的计算和判断，这种情况就和滚动时候一样，如果设置一个时间阀，那么就可以避免由于大量执行事件计算而造成的性能下降。

防抖

我自己的理解，防抖的意思可以认为是，阻止连续的抖动（所谓的事件触发），也就是说，我们用防抖来让那些连续触发的事件只触发一次。

比如，当我们对一个文本框进行输入的时候，在react中，每次都会触发onChange事件，我们可能在每次事件里发送ajax请求，判断输入的用户名是否曾经注册过，这种情况下我们使用防抖，可以保证只会在最后一次onChange事件才会触发ajax请求。

实现原理

节流

节流实现起来很好理解，设置一个bool值，在时间阀之内，根据这个bool来判断是否执行函数。

function throttle(fn,times = 300){
    let bool = true
    return function(){
        if(!bool){
            return false
        }
        bool = false
        setTimeout(()=>{
            bool = true
            fn.apply(this,arguments)
        },times)
    }
    
}

防抖

防抖实现起来的思路是，用闭包保存执行的函数，多次执行的时候把上一个执行的函数清除掉，然后再次创建一个新的函数。这样在间隔时间内还有事件触发的话，不会执行之前的函数，这么一来，函数真正的执行就是最后一次事件触发。

function debounce(fn,times){
    let timeout = null
    return function(){
        clearTimeout(timeout)
        timeout = setTimeout(()=>{
            fn.apply(this,arguments)
        },times)
    }
}

总结

以上只是很简单的写了一下节流和防抖的原理，在underscore.js里，实现起来更加复杂，但是背后的原理核心就是上边代码写的。两者都是在密集调用的过程中灵活使用setTimeout函数来对频繁触发的事件进行控制和优化。

GPU云服务器云服务器 VUE防抖与节流 js函数节流防抖 VUE防抖

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110127.html

js 函数节流和防抖

摘要：函数节流和防抖防抖和节流的作用都是防止函数多次调用。页面窗口的事件方法节流方法闭包节流防抖一段时间内触发事件只执行一次。 js 函数节流和防抖防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的情况会每隔一定时间（参数wait）调用函数。 throttle 节流节流是将多次执行变成每隔一...

atinosun 2019-08-23 12:25 评论0 收藏0
前端优化 —— 函数的节流和防抖

摘要：文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多，因为这些事件的触发是连续性的，需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文前言在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口 s...

ralap 2019-08-23 12:18 评论0 收藏0
理解节流和防抖

摘要：所以针对此类事件则需要进行节流，或者防抖动处理。节流判断是否已空闲，如果在执行中，则直接函数节流二防抖对于一定时间段内的连续的函数调用，只执行一次原理其实就是一个定时器，当我们触发一个事件时，让这个事件延迟一会在执行。在浏览器dom事件里面，一些事件会随着用户的操作不间断的触发，比如：为一个元素绑定拖拽事件，为页面绑定resize事件（重新调整浏览器窗口大小），页面滚动。如果dom操...

zebrayoung 2019-08-22 16:48 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

张红新 2019-08-22 16:45 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

lieeps 2019-08-29 15:12 评论0 收藏0