JS面试系列之节流

小河马游六花

已于 2022-07-19 17:07:50 修改

阅读量2.4k

点赞数

分类专栏：手写文章标签： javascript 面试前端

于 2022-01-19 21:43:43 首次发布

本文链接：https://blog.csdn.net/weixin_41198447/article/details/122589886

版权

手写专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.什么是节流？

答：节流是针对响应跟不上触发频率这类问题的一种解决方案（另一种是防抖）。

	节流就是指连续触发事件但是在 n 秒中只执行一次函数。它会稀释函数的执行频率。

2.为什么需要节流？

答：答：一些高频的函数操作比如resize，input，scroll， mousemove可能产生不好的影响，例如事件执行一次就要调用一次ajax。

// 举个栗子
<!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>debounce</title>
</head>
<style>
    #box {
        width: 100%;
        height: 300px;
        background-color: #eee;
        color: red;
        font-size: 30px;
        text-align: center;
        font-weight: 700;
        line-height: 300px;
    }
</style>
<body>
<div id="box"></div>
<script>
    var count = 1;
    var oBody = document.getElementById('box');
    function getUserAction() {
        oBody.innerHTML = count++;
    }
	// 鼠标的移动事件会高频出发某个事件（该事件可能是一个很耗性能的操作）
    oBody.addEventListener('mousemove', getUserAction, false)
</script>
</body>
</html>

3.节流怎么实现？

// 时间戳版本
oBody.addEventListener('mousemove', throttle(getUserAction, 1000), false)
function throttle(func, delay) {
   let startTime = Date.now()
   return function () {
       let contxt = this
       let args = arguments
       let curTime = Date.now()
       if (curTime - startTime >= delay) {
           func.apply(contxt, args)
           startTime = curTime
       }

   }
}

// 定时器版本
function throttle(func, delay) {
   let timer = null
   return function () {
       let contxt = this
       let args = arguments
       if (!timer) {
           timer = setTimeout(() => {
               func.apply(contxt, args)
               clearTimeout(timer)
               timer = null
           }, delay)
       } 
   }
}

4.平常开发的应用场景

监听页面的滚动事件

鼠标移动事件

游戏中的一些设计

用户缩放浏览器的resize事件

小河马游六花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS面试系列之节流

1.什么是节流？答：节流是针对响应跟不上触发频率这类问题的一种解决方案（另一种是防抖）。节流就是指连续触发事件但是在 n 秒中只执行一次函数。它会稀释函数的执行频率。2.为什么需要节流？答：答：一些高频的函数操作比如resize，input，scroll， mousemove可能产生不好的影响，例如事件执行一次就要调用一次ajax。// 举个栗子<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫