函数防抖节流

ゝ一世哀愁。 2023-10-12 08:09 38阅读 0赞

采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

function debounce(fn, wait) {   
        var timeout = null;   
        return function() {       
            if(timeout !== null) clearTimeout(timeout);       
            timeout = setTimeout(fn, wait);   
        }
    }
    // 处理函数
    function handle() {   
        console.log(Math.random());
    }
    // 滚动事件
    window.addEventListener('scroll', debounce(handle, 1000));

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

var throttle = function(func, delay) {           
        var prev = Date.now();           
        return function() {               
            var context = this;               
            var args = arguments;               
            var now = Date.now();               
            if (now - prev >= delay) {                   
                func.apply(context, args);                   
                prev = Date.now();               
            }           
        }       
    }       
    function handle() {           
        console.log(Math.random());       
    }       
    window.addEventListener('scroll', throttle(handle, 1000))

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

转载于:https://www.cnblogs.com/anbozhu7/p/11250183.html

发表评论取消回复

表情：

评论列表（有 0 条评论，38人围观）

还没有评论，来说两句吧...

相关阅读

相关函数防抖和函数节流

数抖动就是在一段时间内频繁的访问一个函数，大量的操作了dom。就可能导致一些性能问题。浏览器会出现卡顿的现象。比如你在执行拖拽滚动条。鼠标移动时获取鼠标的坐标。或者是搜索...

淩亂°似流年/ 2024年04月17日 14:40/ 0 赞/ 101 阅读

相关函数防抖节流

采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在

ゝ一世哀愁。/ 2023年10月12日 08:09/ 0 赞/ 39 阅读

相关函数防抖和函数节流

概念　函数防抖（debounce） > 函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。　　简

分手后的思念是犯贱/ 2023年08月17日 16:03/ 0 赞/ 132 阅读

相关函数防抖和节流

函数防抖和节流是用来干什么的？是优化高频率执行js代码一种手段。在js中有一些事件在触发时会不断调用绑定在事件上的回掉函数，极大地浪费资源，降低性能。

左手的ㄟ右手/ 2023年06月10日 14:28/ 0 赞/ 53 阅读

相关函数防抖和函数节流

使用节流防抖函数(性能优化) 那么在 vue 中怎么使用呢：在公共方法中（如 untils.js 中），加入函数防抖和节流方法 // 防抖 ex

「爱情、让人受尽委屈。」/ 2023年03月01日 11:46/ 0 赞/ 72 阅读

相关防抖节流

故心故心故心故心小故冲啊 -------------------- 文章目录防抖节流总结 -------------------- 防抖

r囧r小猫/ 2023年01月12日 11:36/ 0 赞/ 173 阅读

相关防抖、节流

防抖：只要用户触发事件，清除定时器，重新开始记时，避免全局污染，选择使用闭包实现效果。节流：让用户在一段时间之内，只能执行一次。判断当前的tag，tag是true允许执

╰半橙微兮°/ 2022年09月14日 09:23/ 0 赞/ 231 阅读

相关节流、防抖

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担节流：尽量减少触发次数，mint-ui上封装了一个方法 <script> var t

向右看齐/ 2022年01月30日 00:39/ 0 赞/ 360 阅读

相关函数防抖和函数节流

函数节流 > 高频触发事件，在 n 秒内只会执行一次，所以节流会稀释函数执行的频率。举个例子，古时候人们治水，一般都是直接用堵起来的水坝，把水堵住。但是后来发现，堵不如疏

﹏ヽ暗。殇╰゛Y/ 2021年08月26日 13:39/ 0 赞/ 478 阅读

相关防抖节流

vue代码防抖 // timer用于储存定时器 delayed(){ // 检测定时器 if(this.timer){

妖狐艹你老母/ 2021年07月24日 18:39/ 0 赞/ 497 阅读