函数节流

hello ，小伙伴们，又到了每周分享的时候，哎。每次到这个时候，不知道写点什么好呢？今天下雨，休息一天。那么今天来说说函数节流是什么情况吧～

为什么会有函数节流这个词的产生呢？

由于呢？某些事件会不停的触发执行，比如说scroll这个事件，当我们滚动滑轮的时候，会不停的触发监听滚动事件，这个不是我们想要的。极大的浪费了运行性能，因此节流的思想应运而生。当然，这个是我个人的想法。在我看来，函数节流就是用来解决无法阻止的不停触发的事件的。
节流的思想 由于某些事件将不停的触发，我们需要在某个事件来阻止其触发，需要借助定时器来解决这个问题。让这个函数在指定的时间段内触发，换句话来说就是让事件在过了某一时刻才触发。

下面来看看代码

function throttle(method, context) {
     // 出入函数添加对象
      // 函数调用，清空定时器
       clearTimeout(method.tId);
    // 给调用者定义一个定时器  
       method.tId = setTimeout(function() {
    // 保留该函数的上下文，并调用
            method.call(context);
       }, 200);
  // 200ms 为间隔时间
   }

输入框：<input type="text" id="txt1">
function getKey(e) {
   // 这里的e就是事件函数中的e
   // this为事件事件对象
     console.log('我执行了')
}
document.querySelector('#txt1').onkeyup = function(){
     throttle(getKey, this);
}

在看一个demo

// 这里写原生js    html，bdoy的高度设置为3000
 document.addEventListener('scroll',function(e){
            // 判断浏览器是否滚动到地步的逻辑
            // console.log(e.target.body.offsetHeight)
            let pageHeight = e.target.body.offsetHeight;
            // body 总高度3000
            let scrollTop = document.scrollingElement.scrollTop;
            // 滚动高度。 变量
            console.log(scrollTop);
            let winHeight = window.innerHeight;
            // 获取浏览器窗口的高度 
            // 浏览器窗口高度821
            console.log(window.innerHeight);
            //定义一个阀值
            let thresold = pageHeight - scrollTop - winHeight;
            // 进行判断 
            if (thresold > -100 && thresold <= 20) {
                console.log('到底了');
            }
        })    

解决代码

```js

// 这个定义的函数需要在上面的那个函数中去被调用
       function throttle(fn, interval = 500){
            // 设置节流阀
            let canRun  = true;
            return function () {
                // 判断这个节流阀是否为true 。
                if (!canRun) return ;
                // 如果为true，进来之后，设置为false
                canRun = false;
                // 设置一个300毫秒的定时器
                setTimeout(() => {
                    // 改变this指向
                    fn.apply(this,arguments);
                    // 在执行之后，在将节流阀值设置为true 
                    canRun =true;
                }, interval);
            }
        }

看到这里，如果你看不明白。那么就要了解下apply,call的用法哦。

好了 。小伙伴们，今天的分享到这里了～

我是一个对前端非常感兴趣的小伙伴，如果你也是，可以加我为好友哦！

每日分享！～ 函数节流

原文：https://www.cnblogs.com/yaogengzhu/p/10822489.html