前端面试之Js函数去抖和函数节流

1. 什么是函数节流?

首先我们先介绍,什么是函数节流,函数节流听起来高大尚,其实就是对一个函数在一定时间内的一个限制。举个栗子,假设两个人跑步比耐力和距离,规则:每圈跑完需要在4分钟内完成,在4分钟完成的我们可以让他继续往前跑累加距离,如果没有按照每圈四分钟的规则完成,则距离不再继续累加,直接得到了结果。函数节流就是如此。

2. 为什么要函数使用节流

理解了函数节流是什么了,下面我们继续讲解为什么要使用函数节流。我们前端人员开发过程中,有很多事件都是频繁触发。例如:input、mousemove、scroll
、resize等。在浏览器 DOM
事件里面,有一些事件会随着用户的操作不间断触发。也就是说用户在触发这些浏览器操作的时候,如果脚本里面绑定了对应的事件处理方法,这个方法就不停的触发。很消耗浏览器操作dom很耗费性能,也很浪费计算机的资源。当然,ajax频繁向服务器发送请求也将增加服务器的压力。

3. 函数节流怎么使用

函数节流通常有两种方式一种利用setTimeout延时器去实现,另一个是使用时间戳去实现。两种方式都大同小异。下面使用setTimeout来实现。实现思路:首次执行函数时,传入要执行的函数和间隔时间,内部设置一个是否清除定时器的时间重新计时的变量,如果在规定时间内做完则重新计时,如果没有则返回结果。说这么多,我们还是看实例代码吧。下面是模拟搜索输入框的案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖节流</title>
</head>
<body>
  <input type="text" class="input">
  <script>
    // 获取按钮
    let input = document.querySelector(".input")
    // 执行函数
    function inputOutput(event) {
      console.log(event.target.value);
    }
    // 节流防抖函数
    function throttle(fn, wait) {
      var timer = null
      return function () {
        var that = this
        var args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
          fn.apply(that, args)
          timer = null
        }, 1000)
      }
    }
    // 绑定节流函数
    input.addEventListener("input", throttle(inputOutput,1000))
  </script>
</body>
</html>

4. 函数节流应用场景

了解函数节流后,我们要知道主要有哪些应用场景。

  • 搜索框、内容联想等
  • 懒加载、滚动条加载更多
  • 表单提交,防止频繁提交等

5. 结尾

简单做个总结,内容应该是比较容易理解的。函数节流主要是用来节省计算机资源的,再者为了让用户有一个更好的体验。文中有参考链接js进阶篇。当然,谁都是一个学习的过程。重点的学到了记得总结下来,当然,有不对的地方,麻烦大佬们指出来。好的本文到这里就结束了。谢谢大家的观看

你可能感兴趣的:(前端,前端,javascript,html5)