一些-demo.md

title: 一些 demo author: azlar date: '2019-03-26 20:54:10' tags: []

---

some demos

jsfiddle order: /result,js,html,css/

debounce & throttle

<iframe width="100%" height="300" src="//jsfiddle.net/azlar/07ua649y/100/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

code

debounce

// debounce
function debounce(fn, time = 100, options = {}) {
  let args = Array.prototype.slice.call(arguments);
  let timeout = null;
  let debouncing = false;

  let {
    leading
  } = options;
  
  return function() {

    if (leading) {
    	console.log('x', timeout);
      if (!timeout && !debouncing) {
        fn.apply(this, args);
        debouncing = true;

        setTimeout(() => {
          debouncing = false;
          leading = false;
          
          timeout = setTimeout(() => {
            leading = true;
            debouncing = false;
            timeout = null;
          }, time);
        }, time);
      }
    } else {
      	clearTimeout(timeout);
        timeout = setTimeout(() => {
          console.log('xxx', debouncing);
          debouncing = false;
          timeout = null;
          fn.apply(this, args);
          
          leading = true;

        }, time);
    
    }
  }

}

throttle

// throttle
function throttle(fn, freq = 33.33333) {
  let args = Array.prototype.slice.call(arguments);

  let processing = false;
  return function() {
    if (!processing) {
      processing = true;

      setTimeout(() => {
        fn.apply(this, args);
        processing = false;
      }, freq);
    }
  }
};

infinite slider

<iframe width="100%" height="300" src="//jsfiddle.net/azlar/81pkteyc/193/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

background-attachment: fixed;

<iframe width="100%" height="300" src="//jsfiddle.net/azlar/38wpfyLd/2/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

moving background(linear-gradient)

<iframe width="100%" height="300" src="//jsfiddle.net/azlar/koqc94eu/1/embedded/result,html,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

IOS Loading (pull to request)

<iframe width="100%" height="640" src="//jsfiddle.net/azlar/dg0j8ton/10/embedded/result,html,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

loading bar

<iframe width="100%" height="300" src="//jsfiddle.net/azlar/fomwj85h/embedded/result,html,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>