码迷,mamicode.com
首页 > Web开发 > 详细

js 函数节流 与 防抖动

时间:2018-04-04 12:50:35      阅读:727      评论:0      收藏:0      [点我收藏+]

标签:UNC   element   场景   买房   callback   turn   状态   false   change   

函数节流:就如同成都摇号买房,前一个进去选房了,下一个就要等一段时间。这种策略就很好的解决了,一大波人进去选房,销售妹妹没发接待的尴尬局面。

应用场景:监听浏览器滚动条,然后触发函数。

 

// 普通做法
document.getElementById("throttle").onscroll = function(){
    //监听到滚动就直接触发,不停滚动就不停触发
    callback();
    
};

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    //通过设置锁,一段时间只让一个妹纸进来,多了应付不了,你懂得:)
    if(!canRun){
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

  

  

函数防抖动: 就如同选妹子,来了一队列妹子让你选,你只选最后一个,因为前面的太丑了。

应用场景: input 设置了onChange 事件,一旦有改动,就会触发change事件,不停改动,就不停触发。其实,我们只需要最后输入的值。

 

// 函数防抖 
var timer = false; 
document.getElementById("input").onchange = function(){ 
  clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 
  timer = setTimeout(function(){ 
    console.log("函数防抖"); 
  }, 300); 
}; 

  

  

 

js 函数节流 与 防抖动

标签:UNC   element   场景   买房   callback   turn   状态   false   change   

原文地址:https://www.cnblogs.com/bigman-bugman/p/8715481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!