我如何添加时间延迟到咖啡脚本搜索
how do I add time delay to coffeescript search
当用户搜索一个姓氏时,响应是跳跃的
是这样的。我的例子是搜索名称Moon。
因为月亮是最具体的,它运行最快的搜索(例如15.08)http://localhost: 3000/联系人/search_contacts ? search_term = Moon& order_by = first_name& sort_direction = asc&等级= all&组= allhttp://localhost: 3000/联系人/search_contacts ?
因为M是最不具体的,所以它运行最慢的搜索(例如22.47)search_term = M& order_by = first_name& sort_direction = asc&等级= all&组=http://localhost: 3000/联系人/search_contacts ?
莫,Moo也运行。
结果,搜索找到了Moon,但随后被'Moo', 'Mo' &'M'(并导致跳跃和搜索不能正常工作)。
下面是代码(使用coffeescript)
class @ContactsSearch
constructor: ->
SearchUtils.configCheckBoxSelectAll('contacts-checkbox-select-all', 'contacts-container','contacts-delete-button')
SearchUtils.configBtnGroup('contacts-btn-group-grade', doSearch)
SearchUtils.configBtnGroup('contacts-btn-group-order-by', doSearch)
SearchUtils.configBtnGroup('contact-btn-group', doSearch)
SearchUtils.configSortDirBtn('contacts-sort-order-toggle', doSearch)
configDeleteButton()
configAjaxPaginationLinks()
search_box = $('#contacts-search-input')
search_box.data('search-url')
search_box.bind 'input', (e, data) ->
doSearch()
doSearch = ->
search_box = $('#contacts-search-input')
btn_group_grade = $('#contacts-btn-group-grade')
btn_group_order_by = $('#contacts-btn-group-order-by')
sort_order_toggle = $('#contacts-sort-order-toggle')
contact_btn_group = $('#contact-btn-group')
SearchUtils.resetMasterCheckbox('contacts-checkbox-select-all', 'contacts-delete-button')
ajaxCall(search_box.data('search-url') + "?search_term=" + search_box.val() + "&order_by=" + btn_group_order_by.data('value') + "&sort_direction=" + sort_order_toggle.data('value') + "&grade=" + btn_group_grade.data('value') + "&group=" + contact_btn_group.data('value'))
ajaxCall = (finalUrl) ->
search_box = $('#contacts-search-input')
contacts_table = $('#contacts-container')
$.ajax
url: finalUrl
type: "GET"
error: (data, status, xhr) ->
# do nothing
success: (data, status, xhr) =>
contacts_table.html(data)
configAjaxPaginationLinks()
$('[data-toggle="popover"]').popover()
SearchUtils.configContainerCheckBoxs('contacts-checkbox-select-all', 'contacts-container','contacts-delete-button')
configDeleteButton = ->
$("#contacts-delete-button").click (event) ->
event.preventDefault()
bootbox.confirm "Are you sure?", (result) ->
if result
deleteSelectedContacts()
configAjaxPaginationLinks = ->
$('#contacts-container').find(".pagination a").click (event) ->
event.preventDefault()
search_box = $('#contacts-search-input')
finalUrl = search_box.data('search-url') + "?" + $(this).attr("href").split("?").slice(1)
ajaxCall(finalUrl)
deleteSelectedContacts = ->
url = $("#contacts-delete-button").data('url')
deleteIDs = $(".contact-search-item:checked").map(->
$(this).val()
).get()
$.ajax
url: url
type: "POST"
data: JSON.stringify({ ids: deleteIDs }),
contentType: "application/json; charset=utf-8",
dataType: "json"
error: (data, status, xhr) ->
# do nothing
success: (data, status, xhr) =>
doSearch()
document.addEventListener "turbolinks:load", ->
new ContactsSearch()
我是一个咖啡脚本的新手,但我认为我需要改变逻辑。具体来说,我认为我需要添加一个时间延迟:
search_box.bind 'input', (e, data) ->
doSearch()
我试着把'input'改成'keyup',让它在手指离开键盘时进行搜索,但这不起作用。不确定语法是否错误,或者这不是一个咖啡脚本约定。
或者,我认为我需要在咖啡脚本上添加某种时间延迟,但不确定语法?
任何想法?
多谢。
你的评论是正确的,因为你需要揭穿你的输入。您只希望在用户停止输入一段时间后才开始搜索。
最好的方法是通过settimeout。
setTimeout
将在X毫秒内调用一个方法。它还返回一个id,通过它可以取消超时。您将需要使用这两个特性:
# We want to wait for the user to stop typing for 1 second
SEARCH_DELAY = 1000
# here we will save the timeout id so we can cancel the search early
# if the user keeps on typing
searchTimeoutId = null
search_box.bind 'input', ->
# First clear the old search timeout if it exists
clearTimeout searchTimeoutId
# Then set a new timeout to search the text box contents if the user
# doesn't continue typing within 1 second
searchTimeoutId = setTimeout doSearch, SEARCH_DELAY
如果需要进一步解释,请询问。
注:
这在本地开发时可以很好地工作,但是有一些真实世界的场景它无法覆盖。
假设用户正在输入moon landing
,在moon
和landing
之间暂停1秒,这意味着两个单独的搜索将被发送到服务器。局部情况下这是可以的,它们应该会以正确的顺序返回。但中间有一个复杂的网络,顺序就不能保证了。
我建议你在每个查询中发送一个时间戳。然后你可以检查你是否已经收到&
- 可以简化嵌套的延迟Q Promises解析吗
- onclick函数需要双击,因为类分配延迟
- 更多延迟动画
- 对父作用域的指令更新延迟了一步
- 为JS函数添加延迟
- 带有延迟的循环每次应运行5次
- 关键帧之间的css3动画延迟
- 如何在有延迟的情况下对两个代码进行积分
- 如何为.css状态的更改添加延迟
- Angular.js延迟控制器初始化
- 在延迟时设置Whois脚本
- 如何在Javascript中延迟setInterval
- 如何在一个元素动画之后延迟
- 如何将一个方法延迟到另一个方法首先完成,javascript
- jQuery延迟了ajax调用的循环
- 如何减少在移动网络应用程序上播放声音的延迟
- 如何将GreaseMonkey中的XMLHttpRequest延迟到目标页面加载完成
- 实现延迟的jquery更改事件处理程序
- 延迟高亮显示文本区域中的文本
- 如何利用多链接延迟检查并显示ping结果,然后使用JavaScript选择最快的URL