手写函数防抖节流

cod7ce 发布于2019-08-23 14:39 / 1090人阅读

摘要：级事件普通滚动函数节流函数防抖普通滚动普通滚动函数节流判断是否已空闲，如果在执行中，则直接函数节流函数防抖清除未执行的代码，重置回初始化状态函数防抖级事件事件监听函数函数防抖函数节流方法一定时器实现方法二时间戳

DOM 0级事件

DOM 2级事件事件监听

document.addEventListener("scroll", debounce(test, 300))

function test() {
    console.log("函数...")
}

函数防抖（debounce）

function debounce(fn, delay) {
    let timer;
    return function() {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
}

函数节流（throttle）

// 方法一：定时器实现
const throttle = function(fn,delay) {
  let timer = null
  return function() {
    const context = this
    let args = arguments
    if(!timer) {
      timer = setTimeout(() => {
        fn.apply(context,args) 
        clearTimeout(timer) 
        timer = null;
      },delay)
    }
  }
}

// 方法二：时间戳
const throttle2 = function(fn, delay) {
  let preTime = Date.now()

  return function() {
      const context = this
      let args = arguments
      let doTime = Date.now()
      if (doTime - preTime >= delay) {
          fn.apply(context, args)
          preTime = Date.now()
      }
  }
}

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

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

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

前端笔试之手写代码

摘要：扁平化嵌套数组实现描述将嵌套多层的数组展开平铺成只有一层的数组。方法一知识点方法二知识点方法三知识点展开语法其它方法数组去重描述将数组中重复的元素过滤掉。对于函数防抖，门外有人频繁敲门，门卫按最后一次敲门来决定是否开门。知识点发布订阅模式 1. 扁平化嵌套数组/flat实现描述：将嵌套多层的数组展开平铺成只有一层的数组。 let array = [1, [1, 2, 3], [1, ...

zhichangterry 2019-08-23 15:26 评论0 收藏0
前端优化 —— 函数的节流和防抖

摘要：文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多，因为这些事件的触发是连续性的，需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文前言在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口 s...

ralap 2019-08-23 12:18 评论0 收藏0
防抖 - 理解，实践与实现

摘要：本文主要讨论防抖，镜像文章节流理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解防抖节流的读者能够有针对性地，逐一掌握它们。防抖是什么结合上方案例，防抖可以理解为多次触发事件后，事件处理函数只执行一次。为了完整阅读体验，欢迎移步到我的博客原文。防抖（去抖），以及节流（分流）在日常开发中可能用的不多，但在特定场景，却十分有用。本文主要讨论防抖，镜像文章：节流 - 理解，...

yangrd 2019-08-26 12:20 评论0 收藏0
「中高级前端面试」JavaScript手写代码无敌秘籍

摘要：第一种直接调用避免在不必要的情况下使用，是一个危险的函数，他执行的代码拥有着执行者的权利。来自于此外，实现需要考虑实例化后对原型链的影响。函数柯里化的主要作用和特点就是参数复用提前返回和延迟执行。手写路径导航实现一个new操作符实现一个JSON.stringify 实现一个JSON.parse 实现一个call或 apply 实现一个Function.bind 实现一个继承实现一个J...

Zhuxy 2019-05-23 16:26 评论0 收藏0
帝都寒冬一年经验前端面试总结

摘要：不过幸运的是所有面试的公司都给了，在这里总结下经验吧。这里推荐下我当时看的一篇的面经，木易杨老师写的大厂高级前端面试题汇总。前言本人毕业一年，最近陆续面试了头条、瓜子、360、猿辅导、中信银行、老虎等公司，由于最近比较寒冬而且招1-3年的并不多，再加上自己对公司规模和位置有一定要求，所以最后合适的也就这几家了。不过幸运的是所有面试的公司都给了offer，在这里总结下经验吧。掘金：h...

Scott 2019-08-26 10:24 评论0 收藏0