JavaScript函数的防抖和节流

每次触发事件时都取消之前的延时调用方法

function debounce(fn) {
      let timeout = null; // 创建定时器
      return function () {
        clearTimeout(timeout); // 函数每次执行先清掉之前定时器
        timeout = setTimeout(() => { // 再重新创建一个新的定时器,若在定时器结束前这段时间函数再次触发,则会重复上面逻辑,直到函数不再触发,则定时器结束后执行下面代码
          fn.apply(this, arguments);
        }, 500);
      };
    }
    function sayHi()
      console.log('防抖成功');
    }
var input = document.getElementById('input');
input.addEventListener('input', debounce(sayHi)); // 防抖

节流

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

思路:

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

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 函数执行前先判断标记的状态,若为false直接终止
        canRun = false; // 走到这里说明之前标记为true,那么本轮函数可以执行,改变标记状态
        fn.apply(this, arguments);
        setTimeout(() => { // 函数执行后在特定时间内状态一直保持false,若再次触发则在上方直接被终止,直到定时器结束,状态被更改为true,可以再次触发
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/fcddc2835ed3c9e0c1e53ac84396e136.html