防抖和节流

朱雀 2022-03-18 01:44 331阅读 0赞

**1. 防抖**

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

*\* 思路*：每次触发事件时都取消之前的延时调用方法

function debounce(fn) {
        let timeout = null; // 创建一个标记用来存放定时器的返回值
        return function () {
            clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
            timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
                fn.apply(this, arguments);
            }, 500);
        };
    }
    function sayHi() {
        console.log('防抖成功');
    }
    
    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

**2. 节流**

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

*\* 思路*：每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn) {
        let canRun = true; // 通过闭包保存一个标记
        return function () {
            if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
            canRun = false; // 立即设置为false
            setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
                fn.apply(this, arguments);
                // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
                canRun = true;
            }, 500);
        };
    }
    function sayHi(e) {
        console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

发表评论取消回复

表情：

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

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

相关阅读

相关防抖和节流

前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去...

梦里梦外;/ 2024年04月18日 21:02/ 0 赞/ 94 阅读

相关防抖和节流

防抖：debounce(不停滑动鼠标时，数字不会累加，当停止滑动，1000ms之后数字才会累加) let num = 1; let div= docu

秒速五厘米/ 2023年07月17日 02:55/ 0 赞/ 40 阅读

相关防抖和节流

之前代码：滑动右侧A-Z导航条 handlerTouchMove(e) { if (this.touchStatus) {

怼烎@/ 2023年02月23日 03:58/ 0 赞/ 38 阅读

相关防抖和节流

防抖是为了防止频繁触发的操作，在指定时间内我们让用户的行为只触发一次在第一次点击时/最后一次点击时（只能识别一次） function debounce(

约定不等于承诺〃/ 2023年01月08日 02:06/ 0 赞/ 169 阅读

相关防抖和节流

防抖（debounce）:当持续触发事件时，保证只执行最后一次事件处理函数 > 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件onmousemo

àì夳堔傛蜴生んèń/ 2022年11月05日 08:32/ 0 赞/ 222 阅读

相关防抖和节流

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

待我称王封你为后i/ 2022年08月30日 11:37/ 0 赞/ 239 阅读

相关防抖和节流

1. 防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 \ 思路：每次触发事件时都取消之前的延时调用方法 function

朱雀/ 2022年03月18日 01:44/ 0 赞/ 332 阅读

相关节流、防抖

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

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

相关防抖和节流

防抖和节流一、什么是防抖二、防抖使用场景 1.输入框是按键触发请求时三、什么是节流四、节流的使用场景 1.鼠标连续

快来打我*/ 2021年09月07日 06:13/ 0 赞/ 517 阅读

相关防抖节流

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

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