函数防抖,函数节流,函数珂里化

相同点:

           一个高频触发的函数,规定的时间内,函数防抖和函数节流都是用来对函数的调用做降频(降低单位时间内被调用的次数)处理的。

不同点:

           函数防抖是执行最后一次事件,如下:点赞事件是最后一次点赞后三秒后打印输出,不论之前点击事件是否超过三秒,规定的时间是提供最后一次事件调用的时间。

           函数节流是执行最先触发的事件,后面的不执行。规定时间是指,每一个规定时间最开始时,触发一次事件。下面代码每3秒触发一次屏幕滚动事件。

函数防抖

定义:一个高频触发的函数,在规定时间内,只让最后一次事件执行

应用场景:

             1、频繁点赞和取消点赞,只读取最后一次的操作

             2、搜索内容时,用户在不断的输入值时,用防抖来节约请求资源。

代码实现:

 var btn = document.querySelector('button');
  
  btn.onclick = function () {
    console.log('不防抖,点击触发');
    }

  function deb(fn,delay) {
    var time = null;
    // 使用闭包
    return function () {
      clearTimeout(time);
      time = setTimeout(() => {
        fn()
      }, delay);
      }
    }
    // 只会执行一次,最后一次执行
    btn.onclick =deb(function () { console.log('防抖,点击事件执行了')
     },3000) 

函数节流:

             定义:一个高频触发的函数,在规定时间内,只执行最先触发的事件,后面的不执行

            使用场景:

                     1、onscroll(屏幕滚动触发滚动事件),

                     2、onresize(窗口大小调整事件)

代码实现:

function throttle(fn,delay){
      var lastTime = 0;
      // 使用闭包
      return function () {
        var nowTime = Date.now();
        if (nowTime-lastTime>delay) {
          fn()
          lastTime = nowTime;
        }
        }
    }
    document.onscroll = throttle(function () {
      console.log("scroll执行了" + Date.now());
      },3000)

函数珂里化

          把接收的多个参数的函数变换成接收一个单一参数的函数。高阶函数的一个特殊用法。

你可能感兴趣的:(js,js高级,函数节流,函数防抖,函数珂里化)