怎么凑够 150 个字呢? 真烦恼~~~
原谅我先凑个数字!!!
// 防多次 click
document.getElementById('submitBtn').onclick = function() {
debounce(submitHandler, null, 300, 'Hello world!');
};
// 点击事件 Handler
function submitHandler(arg) {
console.log('arg: '+ arg);
}
// 防多次操作函数
function debounce(fn, context, delay, param) {
clearTimeout(fn.timer);
fn.timer = setTimeout(function() {
// 如果传数组就传真正的数组, 不要传类数组, 如 arguments 这种不要传, 因为不好判断
if(Array.isArray(param)/*或者 Object.prototype.toString.call(param) === '[object Array]'*/) {
fn.apply(context, param);
} else {
fn.call(context, param);
}
}, delay || 400);
}
baidu suggest demo 在以下代码中, 拷贝到自己的电脑运行下, 以文件运行就可以了,不需要服务器的.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Baidu Suggest</title> 6 <style type="text/css"> 7 html, body { 8 margin: 0; 9 padding: 0; 10 background: #ccc; 11 } 12 a, li { 13 text-decoration: none; 14 list-style: none; 15 } 16 input, button { 17 outline: none; 18 border: 1px solid #ccc; 19 margin: 0; 20 padding: 0; 21 text-align: center; 22 font: 500 14px/30px ''; 23 } 24 h3 { 25 margin: 50px auto; 26 text-align: center; 27 } 28 .main { 29 margin: 50px auto; 30 width: 800px; 31 height: 500px; 32 border: 1px solid #999; 33 background: #fff; 34 } 35 #sgtCont { 36 position: relative; 37 width: 341px; 38 height: 40px; 39 margin: 50px auto; 40 border: 1px solid #999; 41 border-top-left-radius: 3px; 42 border-top-right-radius: 3px; 43 } 44 #searchIpt { 45 float: left; 46 display: block; 47 width: 290px; 48 height: 100%; 49 line-height: 40px; 50 outline: none; 51 border: none; 52 text-align: left; 53 padding-left: 10px; 54 border-right: 1px solid #999; 55 } 56 #searchBtn { 57 float: left; 58 display: block; 59 width: 40px; 60 height: 100%; 61 line-height: 40px; 62 text-align: center; 63 cursor: pointer; 64 background-size: 100% 100%; 65 } 66 #searchBtn:active { 67 background-color: #ccc; 68 } 69 .lis-wrap { 70 display: block; 71 position: absolute; 72 width: 100%; 73 min-height: 40px; 74 margin: 0; 75 padding: 0; 76 left: 0; 77 top: 40px; 78 border: 1px solid #369; 79 box-sizing: border-box; 80 } 81 .lis-wrap li { 82 cursor: pointer; 83 padding-left: 10px; 84 border-bottom: 1px solid #ccc; 85 } 86 .lis-wrap li:hover { 87 background: #ededed; 88 } 89 #sgtCont .hidden { 90 display: none; 91 } 92 </style> 93 </head> 94 <body> 95 <h3>Baidu Suggest example</h3> 96 <div class="main"> 97 <div id="sgtCont"> 98 <input type="text" id="searchIpt" > 99 <span id="searchBtn">搜索</span> 100 <ul class="lis-wrap hidden"></ul> 101 </div> 102 </div> 103 <!-- <script src="lib/jquery-1.12.3.min.js"></script> --> 104 <script> 105 /* Baidu Suggest API: http://suggestion.baidu.com/su?wd=keyWords */ 106 var searchIpt = document.querySelector('#searchIpt'); 107 var listWrap = document.querySelector('.lis-wrap'); 108 // jsonp 中的回调函数 callback 109 window.baidu = { 110 sug: function(data) { 111 console.log(data); 112 var htm = ''; 113 if (data.s.length) { 114 data.s.forEach(function(item, i, array) { 115 htm += "<li>"+ item +"</li>"; 116 }); 117 listWrap.classList.remove('hidden'); 118 listWrap.innerHTML = htm; 119 } else { 120 listWrap.classList.add('hidden'); 121 listWrap.innerHTML = ''; 122 } 123 } 124 } 125 126 // 搜索框 keydown 触发事件 127 // 此处第四个参数不能传 keyWords，由于节流函数内部原因，只能在 debounce 里获取 keyWords 128 searchIpt.addEventListener('keydown', debounce.bind(null, pullResource, null, 300, null), false); 129 /* 130 * 说明: pullResource 函数 131 * 1. 事件处理函数 pullResource, 调用 baidu suggest 接口； 132 * 2. 采用 jsonp 跨域方式，回调函数: callback=baidu.sug(param)， 133 * jQuery 中 $.ajax 方式的回调函数: fail, success 都可以省略，不省略的话会执行 fail 回调； 134 * 3. jsonp 只能用 get 方式请求 135 * */ 136 // 方法一: 原生方法, 通过动态创建 script 标签跨域 137 function pullResource(keyWords) { 138 var script = null; 139 script = document.querySelector('#baiduSut'); 140 if (script) { 141 document.body.removeChild(script); 142 } 143 script = document.createElement('script'); 144 script.id = 'baiduSut'; 145 script.src = 'http://suggestion.baidu.com/su?callback=window.baidu.sug&wd='+ keyWords; 146 document.body.appendChild(script); 147 } 148 149 /*// 方法二: 利用 jQuery 的 ajax-jsonp 方式. 需要引入 jquery 150 function pullResource(keyWords) { 151 $.ajax({ 152 type: 'get', 153 url: 'http://suggestion.baidu.com/su?wd='+ keyWords, 154 dataType: 'jsonp', 155 jsonp: 'callback', 156 jsonpCallback: 'baidu.sug' 157 }) 158 .fail(function(err) { 159 console.log(err); 160 }) 161 .success(function(data) { 162 console.log(data); 163 }) 164 }*/ 165 // 防多次操作函数(节流函数) 166 function debounce(fn, context, delay, param) { 167 clearTimeout(fn.timer); 168 fn.timer = setTimeout(function() { 169 var param = param || searchIpt.value.trim(); 170 // console.log("keyWords: "+ param); 171 if (!param) { 172 listWrap.classList.add('hidden'); 173 listWrap.innerHTML = ''; 174 } else { 175 if(Array.isArray(param)) { 176 fn.apply(context, param); 177 } else { 178 fn.call(context, param); 179 } 180 } 181 }, delay || 400); 182 } 183 /* 184 // 原节流函数 185 function debounce(fn, context, delay, param) { 186 clearTimeout(fn.timer); 187 fn.timer = setTimeout(function() { 188 // 如果传数组就传真正的数组, 不要传类数组, 如 arguments 这种不要传, 因为不好判断 189 if(Array.isArray(param)) { // 或者 Object.prototype.toString.call(param) === '[object Array]' 190 fn.apply(context, param); 191 } else { 192 fn.call(context, param); 193 } 194 }, delay || 400); 195 } 196 */ 197 </script> 198 </body> 199 </html>
效果图:
