手写jsonp、实现防抖节流

jsonp:

<script type="text/javascript">
   //添加<script>标签的方法
   function addScriptTag(src){
       var script = document.createElement('script');
       script.setAttribute("type","text/javascript");
       script.src = src;
       document.body.appendChild(script);
   }
   
   window.onload = function(){
       //搜索apple，将自定义的回调函数名result传入callback参数中
       addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");
       
   }
   //自定义的回调函数result
   function result(data) {
       //我们就简单的获取apple搜索结果的第一条记录中url数据
       alert(data.responseData.results[0].unescapedUrl);
       document.body.removeChild(script);
   }
</script>

防抖：如果有一个计时器了，重新清空再从头计时。

const debounce = (fn, delay) => {
       let timer = null
       return () => {
            if (timer) {
                clearTimeout(timer)
            }
       		timer = setTimeout(fn, delay)
       }
}

节流：如果技能可以用，间隔一段时间delay，执行技能fn(),并让技能从新可用timer = null

const throttle = (fn, delay) => {
       let timer = null
       return () => {
           if (!timer) {    
               timer = setTimeout(() => {
                    fn()
                    timer = null
               }, delay)
            }
        }
}

防抖和节流的使用场景
防抖（debounce）
1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流（throttle）
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断