Javascript-函数节流与函数防抖

ivan_qhz 发布于2019-08-23 12:10 / 1208人阅读

摘要：函数节流名词解释函数节流连续执行函数，每隔一定时间执行函数使用场景鼠标移动，事件元素动态定位，对象的和事件等等函数节流简单实现上次执行的时间定时器默认间隔为现在的时间当前距离上次执行的时间小于设置的时间间隔清除定时器时间后，执行函数当前距离

函数节流（throttle） 名词解释

函数节流（throttle）：连续执行函数，每隔一定时间执行函数

使用场景

鼠标移动，mousemove 事件
DOM 元素动态定位，window对象的resize和scroll 事件
等等...

函数节流（throttle）简单实现

    function throttle(fn, delay) {
        var last; // 上次执行的时间
        var timer; // 定时器
        delay || (delay = 250); // 默认间隔为250ms
        return function() {
            var context = this;
            var args = arguments;
            var now = +new Date(); // 现在的时间
            if (last && now < last + delay) { // 当前距离上次执行的时间小于设置的时间间隔
                clearTimeout(timer); // 清除定时器
                timer = setTimeout(function() { // delay时间后，执行函数
                    last = now;
                    fn.apply(context, args);
                }, delay);
            } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
                last = now;
                fn.apply(context, args);
            }
        };
    }

函数防抖（debounce） 名词解释

函数防抖（debounce）：空闲时间必须大于或等于一定值的时候，才会执行调用方法

使用场景

文本输入keydown 事件
等等...

函数防抖（debounce）简单实现

    function debounce(fn, delay) {
        var timer; // 定时器
        delay || (delay = 250); // 默认空闲时间250ms
        return function() {
            var context = this;
            var args = arguments;
            clearTimeout(timer); // 清除定时器
            timer = setTimeout(function() { // delay时间后，执行函数
                fn.apply(context, args);
            }, delay);
        };
    }

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

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

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

说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle)

摘要：基础防抖我们现在写一个最基础的防抖处理标记事件也做如下改写现在试一下，我们会发现只有我们停止滚动秒钟的时候，控制台才会打印出一行随机数。为何要防抖和节流有时候会在项目开发中频繁地触发一些事件,如 resize、 scroll、 keyup、 keydown等，或者诸如输入框的实时搜索功能，我们知道如果事件处理函数无限制调用，会大大加重浏览器的工作量，有可能导致页面卡顿影响体验；后台...

yanwei 2019-08-23 18:10 评论0 收藏0
JavaScript：函数防抖与函数节流

摘要：函数防抖简单实现模拟请求获取函数的作用域和变量清除定时器节流名词解释连续执行函数，每隔一定时间执行函数。效果函数防抖是某一段时间内只执行一次函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。防抖（debounce）名词解释：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。使用场景：以百度输入框例，比如你要查询...

elina 2019-08-23 15:26 评论0 收藏0
JavaScript之节流与防抖

摘要：个人博客原文地址背景我们在开发的过程中会经常使用如等事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。个人博客原文地址背景我们在开发的过程中会经常使用如scroll、resize、touchmove等事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。因此针对这类事件要进行节流或者防抖处理节流节流的意思...

wayneli 2019-08-23 10:33 评论0 收藏0
JavaScript防抖和节流

摘要：概念函数防抖和函数节流，两者都是优化高频率执行代码的一种手段。防抖任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流指定时间间隔内只会执行一次任务一定时间内方法只跑一次。概念函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流：指定时间间隔内只会执行一次任...

DevWiki 2019-08-23 17:09 评论0 收藏0
js 防抖节流 JavaScript

摘要：此时需要采用防抖和节流的方式来减少调用频率，同时不影响原来效果。函数防抖当持续触发事件时，一段时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前就触发了事件，延时重新开始。 js 防抖节流 JavaScript 实际工作中，通过监听某些事件，如scroll事件检测滚动位置，根据滚动位置显示返回顶部按钮；如resize事件，对某些自适应页面调整DOM的渲染；如ke...

int64 2019-08-23 14:48 评论0 收藏0