Добавление URL-адреса с хэшем и заголовка страницы через 3 секунды с помощью jQuery

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть скрипт мгновенного поиска в стиле Google, написанный на jQuery. Когда пользователь выполняет поиск, создается URL-адрес, который является чем-то вроде #search /QUERY /1 /, и их запрос помещается в заголовок страницы. В настоящее время это происходит при вводе данных, однако я хочу, чтобы это делалось только после того, как они останутся на странице результатов в течение 3 секунд. Как я могу это сделать?

Мой код:

 $(document).ready(function(){
    $("#search").keyup(function(){
        var search=$(this).val();
        var query=encodeURIComponent(search);
        var yt_url='search.php?q=' query 'amp;category=web';
        window.location.hash='search/' query '/1/';
        document.title=$(this).val() " - My Search Script";
        if(search==''){
            window.location.hash='';
            document.title='My Search Script';
        }
        $.ajax({
            type:"GET",
            url:yt_url,
            dataType:"html",
            success:function(response){
                if(response !=""){
                $("#result").html(response);
                } else {
                $("#result").html("Your search did not return any results");
                }
            }
        });
    });
if(window.location.hash.indexOf('#search/')==0){
    query=window.location.hash.replace('#search/', '').replace('/1/', '');
    $('#search').val(decodeURIComponent(query)).keyup();
}
});
  

Ответ №1:

Вы хотите изменить заголовок страницы после того, как пользователь пробыл на странице результатов 3 секунды. Это означает, что после завершения функции ajax success и отображения результатов, через 3 секунды после этого, вы хотите изменить заголовок.

 $(document).ready(function(){
    $("#search").keyup(function(){
        var search=$(this).val();
        var query=encodeURIComponent(search);
        var yt_url='search.php?q=' query 'amp;category=web';
        window.location.hash='search/' query '/1/';
        //document.title=$(this).val() " - My Search Script";
        if(search==''){
            window.location.hash='';
            document.title='My Search Script';
        }
        $.ajax({
            type:"GET",
            url:yt_url,
            dataType:"html",
            success:function(response){
                if(response !=""){
                    $("#result").html(response);

                    // schedule a function to change the page title after 3 seconds
                    setTimeout(function() {
                        document.title = search   " - My Search Script";
                    }, 3000);
                } 
                else {
                    $("#result").html("Your search did not return any results");

                    // reset the title
                    document.title='My Search Script';
                }
            }
        });
    });
if(window.location.hash.indexOf('#search/')==0){
    query=window.location.hash.replace('#search/', '').replace('/1/', '');
    $('#search').val(decodeURIComponent(query)).keyup();
}
});
  

Хотя, если вы спросите меня, не нужно ждать 3 секунды. Измените его в тот момент, когда будут возвращены результаты поиска.

Ответ №2:

Вы можете обернуть свою функцию внутри функции setTimeout следующим образом:

setTimeout(функция(){ }, 3000);