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

js节流函数高级版

时间:2017-04-13 00:56:09      阅读:389      评论:0      收藏:1      [点我收藏+]

标签:delay   数据   发送   oct   his   UI   charset   ons   连续   

节流函数其主要作用就是防止用户在短时间内多次触发该事件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  思路: 鼠标抬起,间隔0.5秒请求小区数据,通过上下箭头选择小区,输入框文字变化,按下enter或者搜索按钮时,通过输入框中小区名字获取小区uid,如果没有uid,就搜索标题,如果有uid,通过uid获取小区下的房源数据,把数据发送到列表组件。 
  <script>
  function throttle(fn, delay, duration) {
    var timer = null,
      begin = new Date();
    return function() {
      var context = this,
        args = arguments,
        current = new Date();
      clearTimeout(timer);
      if (current - begin >= duration) {
        fn.apply(context, args);
        begin = current;
      } else {
        timer = setTimeout(function() {
          fn.apply(context, args);
        }, delay)
      }
    }
  };

  function demo() {
    console.log(1)
  }
  /*参数说明:第一个参数是要执行的函数,第二个参数是说在500毫秒内连续触发了该函数只执行一次,第三个参数是说每隔200毫秒自动执行一次该函数*/
  window.onresize = throttle(demo, 500, 200)
  </script>
</body>

</html>

 

js节流函数高级版

标签:delay   数据   发送   oct   his   UI   charset   ons   连续   

原文地址:http://www.cnblogs.com/yesyes/p/6701851.html

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